CSS Container Queriesとは — コンポーネントベースのレスポンシブデザイン
CSS Container Queriesは、ビューポートではなくコンテナ要素のサイズに基づいてスタイルを切り替える新しいCSS機能です。メディアクエリが「画面サイズ」に反応するのに対し、コンテナクエリは「コンポーネントのサイズ」に反応します。
メディアクエリとの違い
`@media (min-width: 768px)` はブラウザのビューポート幅に反応します。一方 `@container (min-width: 400px)` は指定したコンテナ要素の幅に反応します。同じコンポーネントでもサイドバー内に置いたときとメインエリアに置いたときで異なるスタイルを適用できるため、真にコンポーネントベースのレスポンシブデザインが実現できます。
container-typeの設定
`container-type: inline-size` は横幅（インライン方向）のクエリのみを有効にします。`container-type: size` は縦横両方のクエリを有効にしますが、コンテナ要素に明示的な高さが必要です。ほとんどのユースケースでは `inline-size` で十分です。`container-name` でコンテナに名前を付けると、ネストしたコンテナを明示的に指定して @container クエリを書けます。
実用的なパターン
カードコンポーネントが400px以上のコンテナ内にある場合は横並びレイアウト、それ以下では縦積みレイアウトに切り替えるのが典型的な使い方です。ナビゲーションメニュー・価格カード・メディアオブジェクトなどをコンテナクエリでレスポンシブにすることで、グリッドシステムやブレークポイントへの依存を減らせます。
ブラウザサポート
Container Queriesは2023年以降の主要ブラウザ（Chrome 105+, Firefox 110+, Safari 16+）でサポートされています。IE・古いEdgeは非対応ですが、現代のWebアプリケーション開発では実用的に使えます。Chromeで最初に実装されてから急速に他ブラウザにも普及し、2024年現在では安心して使える機能です。