Section 6 : リンクされたスタイルシート

確かにスタイルシートの自由なレイアウトは魅力だけれど,滝が降り注ぐように次から次へと出てくる属性をいちいち指定するのはめんどうだ。何かよい方法はないのかな?


スタイルだけを記述した専用ファイルを作っておき,このスタイルを使いたい文書からリンクするのが効果的。たとえば,見出しに使う <H4><P> にフォントの種類や色を次のように指定し,ファイル名には拡張子 .css をつけて保存する。ここでは,mystyle.css としよう。

H4 {
    font-weight: bold;
    font-size: 115%;
    font-family: "MS Pゴシック", Osaka, Gothic, sans-serif;
}
P { text-indent: 1em; }
.style1 { color: red; }

多数の Web ページに同一のスタイルを適用できるので,文書管理の効率が格段に向上することは請け合いだ。CSS の特筆できる点は,カラフルなページを作るだけではなく,最大のウリはこのリンクされたスタイルシートにあると思う。

リンクのしかたは <HEAD>...</HEAD> の中に,次の1行を入れるだけでよい。<LINK> については More about HTML Section 8 を参照されたい。

<LINK REL=stylesheet HREF="mystyle.css" TYPE="text/css">

このような設定で <H4><P> を本文中で使ってみると,フォントの種類や色,パラグラフ先頭の字下げなどが自動的に行われる。

<H4>孟子曰、君子有三楽。</H4>
<P CLASS=style1>孟子が云うには,君子には三つの楽しみがあって,それは天下を取ることではない。両親が健在で兄弟に争いがないことが一つ目の楽である。天にたいしても人に対しても恥じることがないことが二つ目の楽である。天下の英才を得てこれを教育する,これが三つ目の楽である。</P>

やや説教じみてきましたが,

孟子曰、君子有三楽。

孟子が云うには,君子には三つの楽しみがあって,それは天下を取ることではない。両親が健在で兄弟に争いがないことが一つ目の楽である。天にたいしても人に対しても恥じることがないことが二つ目の楽である。天下の英才を得てこれを教育する,これが三つ目の楽である。

リンクされたスタイルシートを使うことによって,文書のメインテナンスは格段に向上する。CSS で書かれた多くのページが,ここで解説した形でスタイルを定義している。複数の文書のデザインを変えたい場合に,色やマージンなどを一気に変えることができるから,各ページの開始タグの中をいちいち変更する必要もなく保守作業は実に簡単だ。

CSS ファイルの詳細は First step CSS の外部 CSS-ファイルを,また CSS ファイルの作り方については Step forward CSS の Appendix C を参照されたい。

 IE3  リンクされたスタイルシートに BODY { ... } のように <BODY> に対する記述を書いても無視されてしまう。これは,IE3 のバグである。


解決! センター化学 I
解決! センター化学 I ◆ Z 会出版