実践XHTML+CSSでつくるホームページ講座

CSSの利用

CSSはカスケーディングスタイルシートといいます。たんにスタイルシートということが多いです。
テキスト、画像、テーブル、カラム、表示、プリントなど、XHTMLのソースのさまざまな要素にデザインを加えることができます。

ホームページ制作初心者には、いきなり３カラムのデザインを作ろうなどということはいささか敷居が高いことと思います。

CSSには３種類の使い方があります。

• 任意のタグをstyle属性で指定する
• head内にstyle要素を記述する
• CSSファイルを外部から読み込む

どれにもよいところわるいところありますが、現在では「CSSファイルを外部から読み込む」が主流です。head部分にこう記述します。

<link rel="stylesheet" type="text/CSS" href="○○○.CSS" media="○○○" />

外部スタイルシートを利用する場合はページの頭に文字コードを記述するといいでしょう。

@charset "Shift_JIS";

ではセレクタについてご説明しましょう。

• 適用先｛表示方法の指定｝

これがセレクタと呼ばれるCSSの基本の書き方です。具体的には、

body.h1.p{margin:0;}

となります。

idセレクタは、「#○○｛margin:0;｝」、クラスセレクタは、「.○○｛margin:0;｝」となります。

CSSを理解するうえでもうひとつ重要な要素は、「ボックス」です。
たとえば高さ２００ピクセル、幅５００ピクセルの画像を表示した場合、もしpaddingを５０ピクセル指定したとしたら、widthは５５０ピクセル、heightは２５０ピクセルになります。それが実際の表示範囲です。さらにmarginを設定していたら、その外側にmarginの幅が加わります。
それをわかっていなかったら、レイアウトがめちゃくちゃになってしまいます。ボックスの概念をしっかり覚えておきましょう。