CSS では,どのように文書に対してデザインを行うのだろう? まずは,CSS におけるいくつかの大切な考え方を紹介し,実際の書き方を見てみよう。
たとえば,1 つのパラグラフに着目したとき,それが画面に出力される際に多数の“性質”を持つことがわかる。この“性質”は,たとえば文字色であったり,余白の取り方,行間隔,フォントなどである。これらを,CSS ではプロパティ(属性)という。プロパティにはそれぞれ名前が付けられていて,たとえば,前景色に対するプロパティは color
,文字の大きさに対するプロパティは font-size
である。プロパティの名前は,大文字・小文字を区別しない。CSS2 では,プロパティの種類は 100 以上におよぶが,すべてをすべて使いこなせなくても,WWW パブリッシングには相当に役立つはずである。
CSS では,文書中のすべての要素がすべてのプロパティを持っていると考える。ただ,個々のプロパティが出力に影響するかどうかは,文書中の要素の種類によったり,これが出力されるメディアによったりする。たとえば,文字を装飾するプロパティは文字でない要素には(そのプロパティそのものはもつものの)出力の際には影響しない。音声出力デバイスの場合には,視覚的な出力に関するプロパティは意味を持たない。
Academic HTML 4.0 の CSS チュートリアルでは,property に対してもっぱら“属性”ということばを使っていたが,CSS2 においては,HTML などの文書言語の属性(アトリビュート)と紛れやすいので,もっぱら“プロパティ”ということばを使うことにする。
プロパティは,値を持っている。たとえば color
プロパティにしても,はたしてそれが“何色か”という情報がなければ意味がない。前景色が黒ならば,color
プロパティは“黒”という意味の値を持っている。
CSS では,プロパティに値を与えることで出力をさまざまに変化させて,文書のデザインを行う。これを行う書式は宣言という。
プロパティ:
値;
プロパティ名と値はコロン「:
」で区切られる。一般に,値を指定し終わったらセミコロン「;
」でそれを示す。宣言の途中では,語を分断しなければ空白文字を入れてもよい。
たとえば,color
プロパティに“青”を表す値 blue
を与える宣言は,
color: blue;
となる。
プロパティに対して複数の値を与える場合もある。このときは,一般に,空白文字で値を区切る。たとえば,
text-decoration: underline blink;
のようになる。複数の値を与えるプロパティには,値の順序が問題になるものもある。
プロパティには初期値が決められており,そのプロパティに対して値を与えなかった要素では,初期値に戻されるか,そのすぐ外の要素(親要素)の値をそのまま使う。とくに,後者をプロパティの値の継承という。
プロパティに値を与えることができても,それを文書中のどの要素に対応づけるかを明示しなくてはならない。対応づけを行うためには,まず先ほどの宣言を(複数でもよい)ブレース(中かっこ)「{
」「}
」でくくり,ひとまとめにする(これはとくにブロックという)。ブロック中の宣言は,同じプロパティに対するものでない限り順番を問題にしない。ブロック中の最後の宣言は,末尾のセミコロンを省略してもよい。その前に,どんな要素と結びつけるのかという条件を書く。この条件を表したものをセレクタという。また,セレクタおよびブロックの組をルールセット(命令)という。
セレクタ {
宣言 宣言 ...... }
セレクタに与えられた“条件”と一致した要素がブロック内の宣言によってプロパティを設定される。“条件”としてもっとも簡単なものは,要素の種類を与えることである。セレクタを H1
とすれば,それは H1
要素と一致する。
たとえば,1.1 で例にあげた,“H1
は栗色,H2
は藍色,H3
は緑色,H4
は灰色”を実現するのは次の 4 つのルールセットである。
H1 { color: maroon; }
H2 { color: navy; }
H3 { color: green; }
H4 { color: gray; }
次の例は,1つのブロックに複数の宣言を含むルールセットである。宣言を区切るためのセミコロンを忘れないようにしよう。
H1 { color: maroon; text-align: center; }
これらのルールセットを HTML 文書に作用させれば,あとは黙っていてもセレクタと一致した要素に対して,与えられたプロパティに値がセットされ,出力に反映されるようになる。
ひとつのブロックを複数のセレクタと対応づけることもできる。この場合,セレクタはカンマ「,
」で区切る。たとえば,
H1, H2 { color: red; }
は,次の 2つのルールセットと同等である。
H1 { color: red; }
H2 { color: red; }
ルールセットなどから構成された CSS の一連の記述をスタイルシートと呼ぶこともある。
Academic HTML 4.0 の CSS チュートリアルでは,rule および ruleset に対して“命令”という訳語をあてたが,本稿では原語に即して“ルールセット”を用いることにする。
CSS におけるコメントは「/*
」および「*/
」で囲まれた範囲である。コメントは,スタイルシート中ならば,語を分断しない限り,どこに出てきても,何度出てきても構わない。ただし,コメントの中にコメントを入れ子にすることは許されない。
/* This is a comment. */
これは,CSS のコメントであり,解析の際には無視される。