CSS Container Queriesは、これまで「画面幅」基準だったレスポンシブ設計を、コンテナ（親要素）の幅基準に変える新しい仕組みです。すべてのモダンブラウザで安定して使えるようになり、コンポーネント駆動のUI設計と非常に相性が良い「新常識」となりつつあります。本記事では、基本構文から実用パターンまで解説します。
Container Queriesとは
従来のメディアクエリ（@media）は「ビューポート（画面）の幅」に応じてスタイルを切り替えます。一方、Container Queries（@container）は「親要素の幅」に応じて切り替えられます。同じコンポーネントをサイドバーに置いたときとメインに置いたときで、レイアウトが自動的に変わるといった設計が可能になります。
基本の書き方
使い方はシンプルで、2ステップだけです。
STEP 1：コンテナを指定する
.card-wrapper {
container-type: inline-size; /* 横幅を基準にする */
container-name: card; /* 任意：名前付け */
}STEP 2：@containerでクエリする
.card {
display: block;
}
@container card (min-width: 480px) {
.card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
}
}これだけで、.card-wrapper の幅が480px以上のときだけ2カラムレイアウトに切り替わります。ビューポート幅は一切関係ありません。
メディアクエリとの違い
- メディアクエリ：ビューポート基準。ページ全体のレイアウト切り替えに向く
- コンテナクエリ：親要素基準。コンポーネント単位の切り替えに向く
コンポーネント単位で再利用するUIライブラリ・デザインシステムにおいては、置かれる場所によって表示が変わる「真にレスポンシブな部品」を作れるのが大きな違いです。
実用パターン3選
1. カードコンポーネントを自動変形
狭いコンテナでは縦積み、広いコンテナでは横並びに自動切り替え。サイドバー・メイン・モーダルなど、置き場所が異なっても同じカードを使い回せます。
2. グリッド数の自動調整
.grid-wrapper { container-type: inline-size; }
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@container (min-width: 600px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 900px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}3. cqi / cqw 単位でフォントサイズ可変
Container Queriesと同時に cqi cqw といったコンテナ基準の単位も使えます。フォントサイズや余白をコンテナ幅に応じてスムーズにスケールさせられます。
.title {
font-size: clamp(1rem, 4cqi, 2rem);
}ブラウザ対応とフォールバック
Chrome / Edge / Safari / Firefoxすべての主要ブラウザの安定版で2023年以降サポート済みで、現在は実務で問題なく使える水準です。古い環境を考慮する場合は、@supports (container-type: inline-size) で分岐する程度の対応で十分です。
注意点
- container-typeを指定した要素は、自身のサイズが内容に依存しなくなる（containment）ので、親側で幅指定が必要
- すべてをコンテナクエリに置き換える必要はなく、ページレイアウト全体はメディアクエリで十分
- Tailwind CSS v4でも
@containerユーティリティが標準サポート済み
まとめ
Container Queriesは「コンポーネントが自分のサイズで自分の見た目を決める」ことを可能にする、レスポンシブ設計の新常識です。ページ全体はメディアクエリ、コンポーネント単位はコンテナクエリと使い分けるのがベストプラクティス。これからUIライブラリやデザインシステムを作る人は、設計段階で取り入れる価値が十分にあります。
