CSSの@importルールの使い方を徹底解説！基本からメディアクエリまで

CSSの@importルールを使えば、別のスタイルシートを簡単に読み込むことができます。この記事では、@importの基本的な使い方から、記述時の重要な注意点、メディアクエリとの組み合わせ方まで、わかりやすく解説します。

CSSの@importは、あるCSSファイルの中に別のCSSファイルを読み込むためのアットルールです。コードベースが大きくなりつつあるWebサイトでは、特に役立つ機能です。

@importの基本的な使い方

基本的な書き方は以下のとおりです。

@import url(variables.css);

この方法を活用すると、変数・タイポグラフィ・カラー・スペーシングなど、目的ごとにCSSを個別のファイルへ分割できます。すべてのスタイルを1つの巨大なスタイルシートに詰め込む必要がなくなるため、コードの見通しが格段に良くなります。

分割した各CSSファイルは、メインのスタイルシートからまとめて読み込めます。

/* メインのmain.cssファイル */
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

このように管理すれば、コードベースが成長し続けても、整理された状態を維持できる実用的な手法です。

@import使用時の重要な注意点

@importを使う上で最も重要なのは、@import文をメインのCSSファイル（各ファイルを読み込む側のファイル）の一番先頭に記述することです。

実際の例を見てみましょう。

/* 
メインのmain.cssファイル 
@import文より上にCSSを書かないこと！
*/
@import url(variables.css);
@import url(elements.css);
@import url(colors.css);
@import url(typography.css);
@import url(spacing.css);

/* 
ここより下には通常のCSSを追加できる
*/

.other-stuff {
    padding: 16px;
    background-color: blue;
}

もしメインのCSSファイル内で、@import文よりも上に何らかのスタイルを記述すると、そのスタイルは無視されてしまいます。「@importは必ずファイルの先頭に置く」というルールを守りましょう。

メディアクエリと組み合わせた条件付き読み込み

@import文は、条件付きでスタイルシートを読み込むことにも使えます。たとえば、スマートフォンなどの小さな画面でのみ読み込みたいスタイルシートがある場合は、@importにメディアクエリを付けることで制御可能です。

@import "mobile.css" screen and (max-width: 768px);

上記の例では、mobile.cssは最大幅768ピクセルの画面でのみ適用されます。デバイスごとにスタイルを切り替えたい場合に非常に便利です。

パフォーマンスに関する補足

@importは便利な機能ですが、ブラウザがCSSファイルを順番にダウンロードする必要があるため、ページの表示速度に影響を与えることがあります。パフォーマンスを重視するサイトでは、HTML側で<link>タグを使って複数のスタイルシートを読み込む方法もあわせて検討すると良いでしょう。

まとめ

@importルールを使いこなせば、CSSを目的別に分割して管理でき、プロジェクトの拡張にも柔軟に対応できます。ただし「メインファイルの先頭に記述する」「必要に応じてメディアクエリを活用する」というポイントを押さえておくことが大切です。ぜひ日々の開発に取り入れてみてください。