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

CSSファイルの分割

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

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

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

link要素と@import

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

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

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

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

@importの使い方

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

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

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

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

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

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

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

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

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

ファイル分割の目的は効率的な作成ですので、実際にアップロードする際には、ファイルの中身を統合してもいいかもしれません。翻せば、制作中であれば制作効率や、メンテナンス性重視で作りやすいように自由に分割してよいと思います。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
HTML5とCSS3はプラグインを超える!?
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読