コンテナクエリはコンポーネントがブラウザビューポートではなく親コンテナのサイズに反応できるように します。長年 CSS のウィッシュリスト項目だったものが、ブラウザサポート 97% に達し本番使用の 準備ができました。
コンポーネントにメディアクエリが使えない問題
メディアクエリはビューポートに作用します。広い幅では 2 列、狭い幅では 1 列にすべきカード コンポーネントは、メディアクエリでは自分自身の幅を知ることができません。これが「サイドバー 問題」を生みます: 3 列グリッドでは完璧なカードがサイドバーに配置すると崩れます。
コンテナクエリの構文
まず親に格納コンテキストを確立します:.card-container { container-type: inline-size; }
次に子でコンテナ幅をクエリします。@container ルールは container-type を持つ最も近い祖先が指定した幅以上のとき発火します。
container-type の値
| 値 | 追跡対象 |
|---|---|
| inline-size | 幅のみ（最も一般的） |
| size | 幅と高さの両方 |
コンテナクエリ vs メディアクエリの使い分け
- コンテナクエリ: コンポーネントレベルのレスポンシブ — レイアウトの どこにでも配置できるカード・サイドバー・ウィジェット。
- メディアクエリ: ページレベルのレスポンシブ — ナビゲーションの変更・ ビューポート全体に依存するグリッドのブレークポイント。
ブラウザサポート
Chrome 105+・Firefox 110+・Safari 16+ でサポート — 2026 年 97%+ のブラウザをカバー。 JavaScript ポリフィルなしで本番環境で使用できます。