スタイルシート(CSS)には「別のCSSファイル」を読み込む機能が用意されています。使い方は簡単で、例えば「style2.css」ファイルを読み込むには、次のように記述します。

@import url("style2.css");

スタイルシートの記述が大量になりすぎて、適用先別や装飾種類別にファイルを分割した方が管理しやすくなる場合や、別ページを装飾対象としたスタイルAとスタイルBのうち、共通する部分をスタイルCとして1ファイルに独立させた方が見やすいなどの場合には便利な気がします。ただし、この方法には弊害もあるので注意が必要です(後述)。

なお、この「@import」には「CSSソースの先頭(※)に記述しなければならない」という記述位置の制約があります。それ以外の場所に記述しても無視されますので注意して下さい。ただし、スタイルシートの文字コードを指定する「@charset」を記述する場合には例外で、「@charset」→「@import」の順序で記述します。

※独立したCSSファイル内に記述する場合はファイルの先頭、HTMLのstyle要素内に記述する場合はstyle要素の中身の先頭。

複数の外部CSSファイルを読み込むことも可能

この「@import」を使う方法は複数のCSSファイルを読み込ませることもできます。下記のように必要なだけ列挙するだけです。

@import url("style2.css");
@import url("style3.css");
@import url("style4.css");

説明するまでもないでしょうが、上記では「style2.css」・「style3.css」・「style4.css」の3ファイルを読み込んでいます。

メディアタイプを併記することで、特定の環境にのみ読み込ませることも可能

なお、メディアタイプを併記することで環境を限定しての読み込み指定もできます。例えば以下のようにCSSソースを記述すると、

@import url("styleprint.css") print;
@import url("screen.css") screen;

上記には2つのCSSファイル名が記述されていますが、下記のように読み込まれる環境が限定されます。

• 「styleprint.css」は印刷時にだけ読み込まれ、画面表示には使われません。
• 「screen.css」は画面表示だけで読み込まれ、印刷時には使われません。

上記のように限定すると、例えばテレビ(＝メディアタイプは「tv」)で表示された際には、どちらのCSSも適用されなくなりますので注意が必要です。

指定可能なメディアタイプ

ここで使えるメディアタイプには、「all」(すべて)・「screen」(画面)や「print」(印刷)・「projection」(プロジェクタ)などがあります。ただし、すべてのメディアタイプをブラウザがサポートしているとは限らない点にも注意が必要です。詳しくは、MDNのメディアタイプページなどが参考になります。

@importを使うと読み込み速度の面ではマイナス(デメリット)になる

このように使い方によっては便利な@importですが、読み込み速度の面ではマイナスであり、あまり使用は望ましくありません。読み込み速度が遅くなってしまう理由は、以下の通りです。

仮に、「style1.css」ファイルの中で「style2.css」が読み込まれており、その「style2.css」ファイルの中でさらに「style3.css」が読み込まれているケースを考えます。このときブラウザは、以下のような読み込み動作をします。

• まず「style1.css」を読み込みます。
• そこで@importの記述を発見し、次いで「style2.css」を読み込みます。
• さらに@importの記述を発見し、次いで「style3.css」を読み込みます。

当たり前のように思えるかも知れませんが、この「順番に1つずつ読むしかない」点が速度低下に繋がります。

HTML側にlink要素を使って以下のように記述している場合は、3つのファイルを同時に読み込みできる(＝最初のCSSファイルの読み込み完了を待たずに次のファイルをリクエストできる)ため、回線をより効率よく使ってダウンロードが可能です。

<link type="text/css" rel="stylesheet" href="style1.css">
<link type="text/css" rel="stylesheet" href="style2.css">
<link type="text/css" rel="stylesheet" href="style3.css">

どうせ3つのCSSファイルを読み込むのであれば、上記のHTMLソースのようにHTML側でlink要素を3つ並べて記述する方が、CSSファイル中に「@import」を記述するよりも早く読み込みが完了するでしょう。

どうしてもHTML側に手を加えられないなどの制約があるのであれば、スタイルシート側で@importを使う手もあるでしょうね。

(更新日：2016年01月19日)