この記事の要点

@import は CSS の中から別の CSS ファイルを読み込むアットルール 記述位置はファイル冒頭（@charset 直後）。途中に書くと無視される 構文: @import url("style.css"); または @import "style.css"; メディアクエリやレイヤーを後置できる（例: @import "print.css" print;） 読み込みが直列になるためパフォーマンス上は HTML の <link> 推奨。バンドラ経由なら問題なし

@import とは

@import は CSS のアットルール（@-rule）の 1 つで、現在の CSS ファイルから別の CSS ファイルを読み込んで適用するためのものです。デザインを役割ごとに分割（リセット・タイポグラフィ・コンポーネント・ユーティリティなど）し、メインの CSS から束ねたいときに使います。

基本構文

/* 1. url() を使う書き方 */
@import url("style.css");
@import url("/css/components.css");

/* 2. url() を省く書き方（値はどちらも文字列 URL） */
@import "style.css";
@import "https://example.com/css/base.css";

/* 3. メディアクエリを後置 */
@import "print.css" print;
@import "mobile.css" (max-width: 768px);

/* 4. CSS Cascade Layers に振り分け（モダン） */
@import "reset.css" layer(reset);
@import "components.css" layer(components);

記述場所のルール

@import はファイルの先頭にしか書けません。例外は @charset と他の @import だけです。途中に通常のセレクタを書いた後に @import を書いてもブラウザに無視されます。

/* NG: セレクタの後に書いている */
body { margin: 0; }
@import "extra.css";   /* 効かない */

/* OK */
@charset "UTF-8";
@import "reset.css";
@import "base.css";
body { margin: 0; }

メディアクエリで条件読み込み

@import "desktop.css" screen and (min-width: 1024px);
@import "tablet.css"  screen and (min-width: 768px) and (max-width: 1023px);
@import "mobile.css"  screen and (max-width: 767px);
@import "print.css"   print;

条件にマッチするときだけスタイルが適用される、という意味です。ただしファイル自体は読み込まれます（ダウンロードは発生）。本当に転送量を抑えたい場合は HTML 側の <link media="..."> の方が制御しやすいです。

link タグとの比較

項目	@import	<link rel="stylesheet">
読み込み順	CSS のパース後、直列で順次取得	HTML パース時、並列で取得
性能	レンダリングブロックが長くなりやすい	並列ダウンロードで早い
キャッシュ	個別ファイル単位で効く	同左
条件指定	media / layer / supports などを後置	media 属性で指定
典型用途	CSS 内モジュール分割 / バンドラ前処理	本番配信

パフォーマンス上の注意

ブラウザは @import を見つけてから初めてリクエストを発行します。チェーン状に @import が連なると クリティカルパスが長くなり、初回描画が遅れる原因になります。本番では:

• HTML の <link> で並列読み込みする
• または バンドラ（Vite / webpack / PostCSS / Sass）でビルド時に結合し、最終的に 1 つの CSS にする

CSS Cascade Layers と組み合わせる

新しい @layer 規格と組み合わせると、レイヤー優先順を保ったまま読み込めます。

@layer reset, base, components, utilities;

@import "reset.css"      layer(reset);
@import "base.css"       layer(base);
@import "components.css" layer(components);
@import "utilities.css"  layer(utilities);

supports() で条件分岐

/* CSS Grid 対応ブラウザだけ追加 CSS を読み込む */
@import "grid-layout.css" supports(display: grid);

よくある落とし穴

症状	原因 / 対処
@import が効かない	セレクタの後ろに書いている。先頭に移動
404 エラー	URL のパスが相対指定で別解釈。@import は呼び出し元の CSS から相対
サイト表示が遅い	@import チェーンで直列化。<link> に切り替え or バンドラ化
クロスオリジンで読めない	CORS の設定が必要なケースあり（フォントファイル等）
Sass の @import との混同	Sass の @import はコンパイル時に展開され、ブラウザ仕様とは別物。最新は @use 推奨

関連

• CSSの組み込み方法 — 親カテゴリ
• <link rel="stylesheet"> — HTML から CSS を読み込む
• <style> — HTML 内に直接書く
• style 属性 — インラインスタイル
• @layer / @media / @supports — CSS アットルール