CSSを使ってWebページの見栄えを変えてみる

【本節の目的】
CSS (Cascading Style Sheet)の基本的な利用方法について学習します。

CSSを利用するには

HTMLの各種要素について練習していきます。今まで作成したHTMLファイル（例えば「week07\ex1.html」）を「week09\ex2.html」としてコピーします。コピーしたファイルにサンプルの HTMLと同様の要素を追加・保存し、 Webブラウザでその要素の表示される形を確認して下さい。その作業の繰り返しで、各要素の動作が理解できるはずです。

CSSは、HTML文書の見栄えを指定するものですから、まずはその対象となるHTMLファイル中で、 CSSを利用するための記述を行なう必要があります。その必須事項として、head要素の中に次の1行を追加しなければなりません。

 <meta http-equiv="Content-Style-Type" content="text/css">

これは、「このHTMLファイルのスタイルを決めるのは、テキスト形式で記述されたCSSですよ」ということを宣言しています。

ただし、この宣言だけでは、どのCSSファイルに記述したスタイルを使うのかが分りませんので、以下のような1行もhead要素の中に追加する必要があります。 (利用するCSSファイル名は、皆さんが保存したファイル名(相対URI)に変更する必要があります。)

 <link rel="stylesheet" type="text/css" href="../css/mystyle.css">

上記中の、href属性で、相対URI指定されたファイルが、このHTMLファイルで利用するCSSファイル です。この例では、「../css/mystyle.css」となっています。
上記の例のように、CSSファイルの拡張子は「css」とします。

(註) CSSを利用するには、上記のように「HTMLファイルとは別にCSS専用のファイルを作る」方法以外に、「HTMLファイル中に記述する」方法があります。ただ、HTMLは、「文書を構造化するための記述言語」であり、 CSSは、「HTMLの見栄えを設定する規則集」であるという立場をはっきりさせるために、上記のようにHTMLファイルとは独立したファイルにしておきましょう。また、このようにファイルを分けておくと、編集も楽ですし、別のHTMLファイル (Webページ) の見栄えも統一的に管理することができ、非常に便利です。

CSSでスタイルを設定する

それでは、早速 CSSを使って、 Webページ (HTMLファイル) のスタイルを変更してみましょう。

まずは、最も基本的な p要素についていくつかスタイルを設定して、設定する前と、した後のWebブラウザでの表示の違いを確認して下さい。

[演習：CSSを利用する初期設定とCSSの利用]

以下に説明する手順に従い、CSSを利用するHTMLファイルの準備と、 CSSファイルの作成を行ない、CSSを利用する基本的な方法を習得して下さい。

ここで、以下のことを行ないます。

CSSを利用するために必要なHTMLファイルの変更
これから利用していくCSS専用フォルダの作成
秀丸エディタによるCSSファイルの作成
CSSでの設定の有無・設定内容の変更による表現の変化の確認

(注意) 本テキストでは、CSSのサンプルは、次のような色の領域に書くことにします。

HTMLのサンプルを書く領域の色である、次のものと区別して、間違えないようにして下さい。

サンプルHTMLファイルの変更
「week09\ex2.html」を秀丸エディタで開き、以下の2行を title要素の前にコピー＆ペーストして上書き保存して下さい。
```
<meta http-equiv="Content-Style-Type" content="text/css"> 
<link rel="stylesheet" type="text/css" href="../css/mystyle.css"> 
```
CSS専用フォルダの作成
「css」フォルダ (「week09\css」ではありません) を作成してください。このフォルダに、CSSファイルを保存します。
CSS専用ファイルの作成
秀丸エディタで「ファイル」メニューから「新規ファイル」を選び、表示された空(から)のファイルを、「css\mystyle.css」として保存します。このとき、保存先のフォルダ、ファイル名、拡張子を間違えないよう十分気を付けて下さい。
CSSによるスタイルの設定
「css\mystyle.css」に以下の記述をコピー＆ペーストして、保存して下さい。
```
body {
  background-color: #bac7c7;
}

p {
  color: #006400;
  font-size: 1.15em;
}
```
(註) 上記のCSSでは、以下の３つの設定を行なっています。
- body要素 (HTMLファイル全体) の背景色 (色コード#bac7c7に)
- p要素の文字の色 (色コード #006400に)
- p要素の文字の大きさ (通常の文字の大きさ (1em) の1.15倍の大きさに)
個々のプロパティ(下のbackground-colorやfont-sizeなど)については、改めて学習しますので、ここでは「そんなものか」くらいの認識で結構です。
スタイルの変化の確認
「week09\ex2.html」をダブルクリックして、 Webブラウザでの表示が変ったことを確認して下さい。元の表示から、背景色やp要素の文字の色と大きさが変っていることが分りますか？

スタイルのコメントアウト (無効化)
変化したことを良く確認するために、 CSSの設定を一旦コメントアウトして無効化 してみましょう。秀丸エディタで「css\mystyle.css」を開き (既に開いている場合はそのまま)、設定全体を下記のように、 「/*」と「*/」で囲んで 下さい。囲んだら、(上書き)保存して下さい。
```
/*
body {
  background-color: #bac7c7;
}

p {
  color: #006400;
  font-size: 1.15em;
}
*/
```
「/*」と「*/」で囲まれた部分は、コメント(注釈文)として扱われ、 CSSの設定として評価されません。 そのため上記のようにして保存すると、 CSSの指定は全く無いのと同じになります。

(註) HTML文書中でコメントアウトするとき(コメントを書きたいとき)は、「」で囲むのでしたね。間違えないようにして下さいね。
スタイルをコメントアウトしたときの表示の確認
この状態のまま、Webブラウザを再読込みすれば、 CSSでの指定の無い、元のHTMLだけの表示に戻るはずです。 Webブラウザを再読込して確認して下さい。

確認が終ったら、再度 mystyle.cssファイル中の「/*」と「*/」を消して、 CSSを有効にして(元に戻して)保存しておいて下さい。 一応、Webブラウザを再読込して、CSSが有効になったことを確認して下さい。
【注意】 Webブラウザでの表示が、「CSSをコメントアウトした(CSSが無効)状態」と、「CSSが有効なときの状態」が同じの人は、何かが間違っています。以下の点を確認して下さい。
- HTMLファイルのhead要素でCSSを使う設定(2行追加)をしていない
- CSSファイルを保存しているフォルダが異なる
- CSSファイルのファイル名が異なる
- CSSファイルが、保存されていない。