CSS は HTML 文書の“見た目”を詳しく記述するもの。そういったデザインを構成するものにはどんなものがあり,どうやって記述すればよいのだろう? まず,もっとも簡単な方法から見てみよう。
Introduction で見たように,文書のデザインにあたってはたくさんのファクタがある。CSS では,これらの視覚的ファクタは属性(プロパティ)と呼ばれる。
たとえば,次のような属性がある。とりあえず,“こんなものがあるのか”程度に目を通していただきたい。
視覚的な要素 | CSS での属性 | |
---|---|---|
文字 | 文字の大きさ | font-size |
フォント | font-family | |
色 | 文字の色(前景色) | color |
背景色 | background-color | |
テキスト | 行配置(右寄せ・左寄せ・センタリング) | text-align |
字下げ幅(インデント) | text-indent | |
行間隔 | line-height | |
配置 | 上部余白(トップマージン) | margin-top |
下部余白(ボトムマージン) | margin-bottom | |
左部余白(レフトマージン) | margin-left | |
右部余白(ライトマージン) | margin-right | |
回り込み配置 | float |
上に上げたものはほんの一部である。こういった多彩な属性を使って,文章の視覚的要素を記述するのである。
それで,この属性にどうやって大きさやら色やらを指定するのかというのが次の問題である。CSS での値の指定のしかたはこれである。
(属性):(値);
この属性と値の組を宣言という。属性と値のあいだは半角のコロン「:」で区切り,値を指定し終わったら半角のセミコロン「;」を書く。属性の中には 2 つ以上の値をとるものがあるから,“これで値はすべて書きました”を明示しなくてはならない。C 言語を知っている人にはちょっとなじみがある書き方だろう。
たとえば,“色を赤にする”は次のように書く。
color: red;
複数の値を指定するときはふつう半角スペースで区切るが,特別な場合はカンマ「,」で区切ることもある。
具体的にどのようにスタイルを指定するかというと,もっとも簡単で直接的な方法として HTML 要素の開始タグに STYLE 属性で指定するというのがある。
<ELEMENT STYLE="(属性):(値); (属性):(値); ...">
この STYLE 属性はほとんどの要素が持っている属性である。たとえば,“<H1> の見出しを赤い字にしたい”と思ったとして,これを書いてみると,
<H1 STYLE="color: red;">最重要見出しを赤字にします!</H1>
STYLE 属性の部分にすっぽり宣言を書き込んでしまえばよい。
実際,この出力は
となる。2 つ以上の属性を指定する場合は,必要な数だけ宣言を書けばよい。たとえば,
<H1 STYLE="color: red; text-align: center;">最重要見出しを赤字にします!</H1>
のようになる。