スタイルの付与・常套テクニックを使う

2008.11.28 FRI

XHTML＋CSSでWebサイトを構築する方法

スタイルの付与・常套テクニックを使う

CSSを分けて記述する

次にスタイルを定義していく。このようにシンプルなデザインの場合は、常套（じょうとう）的に使われているテクニックで効率的に制作できる。

CSSを設定するには＜link＞要素を用いて、href属性にパスを指定する。ここではほかに、type属性とrel属性・media属性を指定している。これらの属性について説明すると、＜link＞のtype属性はhrefで指定されるコンテンツ（この場合はCSSファイル）のMIMEタイプに関する情報を与えることができる。rel属性は、そのコンテンツとの関係性を述べ、media属性は意図する出力メディアを指定できる。ここでは「all」と指定しているので、すべてのメディアに対してこのCSSが適用されることになる。

この＜link＞属性に割り当てられているのは、CSSをインポートするのみの役割を持ったCSSである【4】。もちろんCSSは単一ですべてのスタイルを定義することが可能だが、いくつものスタイルを定義するうちに複雑になり、どこに何が書いてあるのかわからず、混乱を招く要因になってしまうことがある。そこでこのようにCSSを用途によって複数に分け、整理する。こうすることによってHTMLには単一の＜link＞でありながら、複数のCSSファイルを適用することが可能だ。CSS内で個別のCSSをインポートする方法はさまざまあるが、ここでは「import url()」を用いた。URLの中には該当するCSSまでパスを書く【5】。@import を使ってCSSを適用する場合には、URLを指定しない書式もある。この書式の場合では、CSSの実装が曖昧なInternet Explorer4（以下、IE）では適用されないため、しばしばIE 4除けのハックとして利用される。さらに、@importにはメディアタイプを指定することができる。この場合には、IE 4～IE 6では適用されなくなるため、特にIE 6をターゲットにしている場合には注意したい。なお、urlを指定しない書式でメディアタイプを指定した場合にはMac版IE 5では無効になる【6】。