Section 1 : CSS の基本

 CSS は HTML 文書の“見た目”を詳しく記述するもの。そういったデザインを構成するものにはどんなものがあり,どうやって記述すればよいのだろう? まず,もっとも簡単な方法から見てみよう。

CSS の属性

 Introduction で見たように,文書のデザインにあたってはたくさんのファクタがある。CSS では,これらの視覚的ファクタは属性(プロパティ)と呼ばれる。

 たとえば,次のような属性がある。とりあえず,“こんなものがあるのか”程度に目を通していただきたい。

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 の文法

 それで,この属性にどうやって大きさやら色やらを指定するのかというのが次の問題である。CSS での値の指定のしかたはこれである。

(属性):(値);

 この属性と値の組を宣言という。属性と値のあいだは半角のコロン「:」で区切り,値を指定し終わったら半角のセミコロン「;」を書く。属性の中には 2 つ以上の値をとるものがあるから,“これで値はすべて書きました”を明示しなくてはならない。C 言語を知っている人にはちょっとなじみがある書き方だろう。

 たとえば,“色を赤にする”は次のように書く。

color: red;

 複数の値を指定するときはふつう半角スペースで区切るが,特別な場合はカンマ「,」で区切ることもある

スタイルの指定方法(1) ― STYLE 属性

 具体的にどのようにスタイルを指定するかというと,もっとも簡単で直接的な方法として HTML 要素の開始タグに STYLE 属性で指定するというのがある。

<ELEMENT STYLE="(属性):(値); (属性):(値); ...">

 この STYLE 属性ほとんどの要素が持っている属性である。たとえば,“<H1> の見出しを赤い字にしたい”と思ったとして,これを書いてみると,

<H1 STYLE="color: red;">最重要見出しを赤字にします!</H1>

STYLE 属性の部分にすっぽり宣言を書き込んでしまえばよい。

 実際,この出力は

最重要見出しを赤字にします!

となる。2 つ以上の属性を指定する場合は,必要な数だけ宣言を書けばよい。たとえば,

<H1 STYLE="color: red; text-align: center;">最重要見出しを赤字にします!</H1>

のようになる。