スタイルシート基礎講座

スタイルシートは正確にはカスケーディング・スタイルシート（CSS）といい、Webページの見栄えを整えるものです。Web技術標準化団体のW3C（World Wide Web Consortium）が1996年12月に提唱し、生まれました。HTMLはもともと文書の論理構造を示すものですから、見栄えを整えるには無理があります。スタイルシートを使えば、さまざまなデザインを細かく設定することができます。インタラクティブなページに使われるダイナミックHTMLはスタイルシートとJavaScriptを組み合わせたものです。CSSの現在のバージョンは2.0です。
　スタイルシートの対応ブラウザはインターネット・エクスプローラー3.0以上、ネットスケープ・ナビゲーター4.0以上です。

２．スタイルシートの書き方

タグなどをセレクタにして、プロパティ（属性）と属性値を指定します。基本的な書式は
セレクタ{属性；値}となります。

(１)タグに直接記述する（インライン指定）

これは<○ STYLE="□:△;">～<○>
の書式となります。○にはタグ、□には属性、△に値を半角英数字で書きます。属性と値はコロン（：）で分け、最後にセミコロン（；）を付けます。セミコロンは設定が一つだけの場合は省略できますが、複数指定の場合は必須ですから、書くようにしていた方がよいでしょう。

例えば、<P>タグ内の文字を赤にする場合、こんな風に書きます。

「ホームページ実用小技集」のページでは分かりやすくするために、すべてこの方法での書式を紹介していますが、これはスタイルシートとしては本来的な使い方とは言えないでしょう。後述する「HTMLファイルの<HEAD>～</HEAD>内に記述する」か「外部CSSファイルにリンクする」を使い、部分的に特殊なスタイルを決めたい場合に使うのに適しています。

(２)HTMLファイルの<HEAD>～</HEAD>内に記述する

このページのスタイルシートを以下に引用します。点線と（）内の数字は説明のためにつけたもので実際に記述する場合は不要です。

(1)スタイルシートはこのように<STYLE TYPE="text/css">～</STYLE>の間に記述します。

(2)記述はスタイルシート未対応ブラウザのために、コメントタグでコメントアウトします。

(3)<BODY>タグの指定で上から順番にbackground-color(背景色)、font-size(フォントサイズ)、font-family(フォントの種類)、color(フォントの色)、line-height(行間)、margin(左右のマージン)を指定しています。emや％など指定の単位については後述します。

(5)<P>タグの指定で、１文字分インデント（字下げ）しています。「ホームページ実用小技集」の「インデント」を参照してください。

(6)リンクの指定です。上から順番にリンク、訪問済みリンク、アクティブなリンク、マウスのポインタが乗った時のリンクの指定になります。詳しくは「ホームページ実用小技集」の「リンクの下線を消す」を参照してください。

(7)このページでは使っていませんが、テーブルタグのキャプションの指定です。

詳しい指定の方法は後述します。ここではスタイルシートとはこんなものだということを理解してください。一見、難しそうに見えますが、一つ一つの指定を見れば、色名など分かりやすい言葉を使った直感的なものであることが分かります。恐れるに足りません。

(３)外部CSSファイルにリンクする

上のスタイルシートをテキスト形式で書き、拡張子に.cssを付けて保存したものが外部CSSファイルになります。この場合、<STYLE TYPE="text/css">～</STYLE>とコメントタグは不要です。リンクの仕方は
<LINK REL="stylesheet" TYPE="text/css" HREF="CSSファイルのURL">
となります。これも<HEAD>～</HEAD>内に書いてください。

CSSファイルは複数のページに同じスタイルを適用する場合に適しています。「シネマ１９８７online」では、「映画評」のページの多くと「データベース」のページに使っています。いちいちHTML内に書く必要がありませんから簡単ですし、ページの見栄えを変える時に一つのファイルの記述変更だけですむ利点があります。難点はネットスケープが対応していないこと。IEとNNの両方できれいに表示したい場合は２のHTMLファイルに書く方法を採った方が良いでしょう。

３．セレクタ

セレクタはスタイルの設定対象です。前述したようにスタイルシートの設定はセレクタ{属性；値}となりますが、セレクタにも複数指定が可能です。
　例えば<BODY>タグと<TD>（テーブルの要素）タグと<BLOCKQUOTE>（引用）タグの文字の大きさを12ポイントにしたい場合、
BODY,TD,BLOCKQUOTE{ font-size: 15px;}
という風にBODYとTD、BLOCKQUOTEをコンマ（,）で分けて書きます。

４．CLASSとID

セレクタの中で特殊なのがCLASSとIDです。これはどちらも任意の言葉で設定できます。CLASSはピリオド（.)に続けて、IDはシャープ(#)に続けて書きます。

CLASSの記述例

<STYLE TYPE="text/css">

</STYLE>

<BODY>
<P CLASS="blue">青い文字で表示の例</P>
<P CLASS="green">文字の背景を緑にする例</P>
</BODY>

IDの記述例

W3Cの定義ではIDはページ内で一度しか使えないそうですが、現実にはIEでもNNでも何度も使えるようになっています。ですからCLASSとIDの使い方、意味するところは同じになります。
　CLASSとIDは同じタグに複数の効果を指定する場合に使います。例えば、<P>タグにインデントの指定をすると、ページ内の<P>タグはすべてインデントしてしまいます。CLASSやIDで指定すれば、同じ<P>タグでもCLASSやIDがある<P>タグだけインデントします。

５．スタイルシートの単位

スタイルシートの値に指定できる単位には絶対値と相対値があります。
絶対値　mm(ミリ),cm(センチ),in(インチ),pt(ポイント),pc(1pc=15px)
相対値　em(大文字のMの高さ）,ex(小文字のxの高さ）,px（ピクセル）,%(パーセント)

一般的に推奨されるのはページの基準となる単位は絶対値、他は相対値での指定です。ページのフォントサイズを絶対値のポイントで指定し、テーブルタグの中だけ相対値のemを使うなどの使用法があります。ピクセルは絶対値ではなく、画面の大きさに応じて変わる相対値ですのでお間違えなく。ぼくもずっと勘違いしていました。個人的に最も使うのはptとem、%です。２のスタイルシート記述例を参照してください。

１．スタイルシートって何？