CSSから別のCSSを読み込む方法

複数のCSSをWebサイトに利用する場合、<head>内で全てを読み込むように記述するとコードが煩雑になってしまうことがありますが、CSSに用意されている機能で、別のCSSをまとめて読み込む場合などに利用できるので記録しておきます。

@import url("style-a.css");
@import url("style-b.css");
@import url("style-c.css");

@import url("style-a.css");

@import url("style-b.css");

@import url("style-c.css");

この「@import」には、記述位置の制約があり、必ずCSSの先頭に記述しなければなりません。それ以外の場所に記述してしまうと読み込んでくれませんので注意が必要です。

例外なものとして、「@charset」「@import」自身があり、このふたつに関しては先頭に記述しても問題はありません。

HTMLのlink要素でCSSを読み込む場合と同じように、メディアタイプを限定して読み込むことも可能です。

▽例えば、印刷時のみに「print.css」を適用させたい場合は、以下のように記述します。

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

1	@import url("print.css") print;