First step CSS - Section 12

Section 12 : 外部 CSS ファイル

　一連の文書に同じ視覚表現を適用させたい場合，その場ごとに STYLE 属性に書き込むのはもちろん，<STYLE> に書き込むのも相当煩雑である。この場合は，外部に CSS ファイルを用意しておき，それを HTML から呼び出すという方法をとるとよい。

<LINK>

　外部に用意された CSS ファイルを呼び出すのに使う方法のひとつに <LINK> がある。この要素は“ここに”の形を持っていて，<HEAD>...</HEAD> の間：ヘッダに書く。CSS ファイルの取り込みを行う際の書式はこのようになる。

　HREF 属性に CSS ファイルの URI（URL）を指定する。この指定のしかたは <A> などのときと同じである。

<LINK> にはスタイルシートファイルの取り込みのほかに文書間の関係を表すのにも用いられる。ここでは，CSS ファイルの取り込みのみを触れておくことにする。

　CSS ファイルは，ひとつの HTML ファイルからいくつも取り込むことができる。

IE3 取り込める CSS ファイルは，HTML ファイル中の最後の <LINK> で指定された 1 つだけである。

外部 CSS ファイルの書き方

　<LINK> によって取り込まれる CSS ファイルは，HTML ファイルと同様にテキストエディタを用いて編集できる。

実際の書き方としては，<STYLE> に書くのとまったく同じ要領でよく，ファイルの先頭からいきなり命令を始めてもかまわない。また，HTML のコメントアウト  で全体をくくる必要はない。

　CSS ファイルは，一般に拡張子“.css”にして保存する。FTP 転送は ASCII で行ってよい。

　CSS ファイルはたとえば次のように書かれる。

/*
  First step CSS の Section 12 にインクルードされる
  CSS ファイルです。
*/

H1 { font-size: x-large; }
P { text-indent: 1em;
    font-family: "ＭＳＰ明朝", "リュウミンライト－ＫＬ", "ＭＳ明朝", Micho, serif; }
EM.imp { color: red; }
SPAN.gothic { font-family: "ＭＳＰゴシック", Osaka, "ＭＳゴシック", Gothic, sans-serif; }

　実際にファイルを参照して見ていただくのもよいだろう。ダウンロードされた場合は，テキストエディタで開いてみてほしい。

　実際の“style.css”は，次項で使用するさい，本文のスタイルとの衝突を防ぐため，ID よる絞り込みをかけてある。実際に HTML ファイルに適用させる場合には，上に示したように書けばよい。

　CSS ファイルを書くときに気をつけなければならないことは，CSS ファイル中で URL を指定する場合，呼び出す HTML ファイルの URL には関係なく，その CSS ファイルがある URL が基準になることである。

　Academic HTML 4.0 中での CSS チュートリアルについては，仕様書に従い，（URI でなく）URL という語を用いる。

IE3 外部の CSS ファイルに BODY のスタイルを書いても無視される。

NN4 規格と異なり URL は現在の HTML ファイルを基準にする。

CSS ファイルの取り込み

　では，先ほどの CSS ファイル（“style.css”というファイル名である）を取り込んで HTML を書いてみよう。

　ヘッダに次のように書き込んで取り込む。

　これで HTML を書いてみる。

<H1>CSS ファイルを取り込む</H1>
<P>取り込まれた <SPAN CLASS="gothic">CSS ファイル</SPAN>は，<EM><STYLE> で書いたものと同じように</EM>はたらきます。</P>
<P>これにより，<EM CLASS="imp">複数の HTML ファイルに共通のスタイルを適用</EM>することができ，手間もひじょうに省けます。</P>