CSSとはCascadingStyleSheetの略で、HTMLのような言語で書かれた文書をデザインするためのものです。HTMLが文書の各部分を指し示すための言語であるのに対して、CSSはその各部分をどう表示するのかを指定するための言語です。よってCSSを効果的に利用するためには正しいHTMLを書く必要があります。
さて、HTML文書の各要素はどう表示されるのかという性質を持っています。例えばhn要素(見出し。n=1-6の整数)であれば文字の大きさ、太さ、色、背景、余白の取り方などです。これらをプロパティと言います。
CSSはプロパティに何らかの値を与えることで様々な表示を行えます。ここで言う「値」は色であったり、その名の通り余白の大きさなどの値であったり、プロパティによって異なります。基本的な書き方は以下のようになります。
プロパティ:値
プロパティと値は半角の「:」(コロン)で区切ります。このようにプロパティと値がセットになったものを宣言と言います。
これで「どのように表示するか」の指定方法は分かりましたね。では、「どの部分を」ということを指定するためにはどうすればいいのでしょうか。これを表したものをセレクタといい、宣言を含めて次のように書きます。
セレクタ{プロパティ:値}
「{}」(中括弧)内に書く宣言は複数でも構いません。この場合、宣言を「;」(セミコロン)で区切ります。つまり複数の宣言を書く場合次のようになります。
セレクタ{
宣言1;
宣言2;
宣言3;
}
さらにセレクタも複数指定出来ます。この場合セレクタ同士は「,」(カンマ)で区切ります。
セレクタ1,セレクタ2{宣言}
これらをふまえて具体的にCSSを書いてみましょう。とりあえずh1要素を装飾してみます。
h1{color:#FF0000;}
上のCSSはh1要素の文字色を赤くします。宣言を複数指定した例も見てみましょう。
h1{
font-size:300%;
background-color:#0000FF;
}
この例ではh1要素の文字サイズを300%(元の大きさの3倍)に、背景色を青くしてみました。
ここまでCSSの書き方を説明しましたが、今度は実際にHTMLに適用させる方法を解説しましょう。HTMLへの適用の仕方は大きく分けて3つあります。
まずはstyle属性。これは要素に直接宣言を書き込む方法で、次のように書きます。
<要素 style="宣言1; 宣言2;">
この方法は複数の要素にCSSを適用させる場合、逐一宣言を書かなければならないので非常に効率が悪いです。あまりオススメ出来ません。
次はstyle要素。style要素はHTMLのhead要素内に記述します。書き方は以下の通り。
<style type="text/css">
セレクタ1{
宣言1;
宣言2;
}
セレクタ2{
宣言3;
宣言4 ;
}
</style>
一つのHTMLファイルにCSSを適用する場合この方法がオススメです。逆に言うと複数ファイルのHTMLファイルに適用する場合、この方法では効率が悪いです。そこで次の方法です。
スタイルシートのみが書かれたファイル(CSSファイル)を用意して、それをHTMLから参照する方法が3つ目です。参照するためにはlink要素を使用します。これもHTMLファイルのhead要素内に書きます。
<link rel="stylesheet" type="text/css" href="URI" />
複数のHTMLファイルに同じCSSを適用したい場合は1つのCSSファイルを用意して、それぞれのHTMLにlink要素を書くだけでOKです。この方法の利点はそれだけではありません。この方法の最大の利点は1つのCSSファイルを書き換えるだけで複数HTMLファイルのデザインを変更出来る点にあります。てなわけで、CSSを使ってWebサイトを制作する場合、この方法を強くオススメします。