第22回　CSSファイルの分割テーブルレイアウトを卒業しよう

CSSファイルの分割

先日の講座で少し話題にのぼったので、今回はCSSファイルをわけて作る方法をご紹介します。

CSSのコード量が増えてくるとどうしても管理が大変になります。コメントをどんなに駆使しても何百行もあればどこに何が書かれているのか見つけるだけでも大変です。

そこで、CSSファイルを複数にわけて管理するという手段がよく取られます。

複数のCSSファイルを1つのHTMLファイルに対して適用するには、link要素を複数使う、またはCSSで@importを複数使う方法があります。

どちらでも見た目は同じ結果を得られますが、管理の効率を考えると、@importのほうがよいかもしれません。

CSSファイルをlink要素でリンクする、または@importで読み込む

上図のように、インポート用のCSSがあれば、HTMLファイルのソースコードをすっきりさせることができます。CSSファイルが増えたり減ったりしたときも、基本的にはHTMLファイルを編集することなく、CSSのみの変更でことたります。

@importは次のように使います。

@import url("reset.css");
@import url("font.css");
@import url("style.css");

また、いろいろな省略方法があります。

/* 引用符を省略 */ 
@import url(reset.css);
/* urlを省略 */
@import "default.css";

urlを省略する際はかならず引用符が必要です。

DreamweaverでCSSの使い方を習得: スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。; Dreamweaver CS5 CSSデザイン手法

また、@importはかならずスタイル宣言の前に記述します。ですので、@charsetの直後か、@charsetがない場合はファイルの先頭に記述し、@importを複数使う場合は、間にスタイル宣言を入れてはいけません。

この決まりを守って、先ほどの図のようにインポート用のCSSを用意し、複数のCSSファイルを読み込みます。

スタイル宣言と同様に、後から読み込んだファイルのほうが優先度が高くなります。

それを考慮して、例えば次のようにファイルを分割します。

reset.css
- ブロックレベル要素のmargin,paddingなど各ブラウザーの差違をリセット。
font.css
- 全体的なフォントサイズの調整など。役割的にはreset.cssやcommon.cssに含めてもよいが、YUIなど使ってる場合は独立させておく方が管理は楽かも。
common.css
- サイト全体のレイアウトや要素の共通設定。
style.css
- 各ページ独自のスタイル。
hack.css
- IE向けのハックなど。