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年現在ではグローバル対応率90%以上で安心して使える機能です。非対応ブラウザ向けのフォールバックとして@supportsで分岐するか、PostCSSプラグインで変換する方法があります。Style Queriesと呼ばれる拡張機能（CSS変数の値に基づくクエリ）も一部ブラウザで実装が進んでいます。