コンテナクエリとメディアクエリの違い

メディアクエリはビューポートの寸法に応答します。一方、コンテナクエリは親コンテナの寸法に応答します。この違いによって、どの問題にどのツールを使うべきかが決まります。

次の用途にはメディアクエリを使用します。

• ページ全体のレイアウト変更（1列と2列の切り替えなど）
• ページの大きなセクションの表示・非表示（モバイルでのナビゲーションドロワーなど）
• ページ全体のタイポグラフィ基準サイズの調整
• 印刷用スタイル
• ユーザー設定のクエリ（ダークモード、モーションの軽減など）

次の用途にはコンテナクエリを使用します。

• コンポーネント単位のレイアウト変更（カードの横並びと縦積みの切り替えなど）
• サイズが不明なコンテナに配置されるコンポーネント（サイドバー、メイン領域、メイン領域内のサイドバーなど）
• 再利用可能なデザインシステムのコンポーネント
• 第三者のページに埋め込むウィジェット

メディアクエリでスタイルを設定したカードは、幅1200pxのページでは1つのブレークポイントで機能します。しかし、そのカードをサイドバーに移動すると、別のブレークポイントが必要になる場合があります。コンテナクエリなら、同じカードが利用可能な空間に合わせて適応するため、そのまま機能します。

実際のアプリケーションでは、両方を使用します。メディアクエリでマクロなレイアウト（デスクトップ幅ではサイドバーを表示するなど）を定義し、コンテナクエリでそのレイアウト内におけるコンポーネントの動作を定義します。

詳細度を追加しないメディアクエリとは異なり、コンテナクエリはコンテキスト固有の詳細度を追加します。@container (min-width: 400px)内のルールは、外側にある同じルールと同じ詳細度を持ちますが、そのコンテナコンテキスト内でのみ適用されます。

コンテナクエリは、2023年以降のすべての最新ブラウザー（Chrome 105以降、Firefox 110以降、Safari 16以降）でサポートされています。最新ブラウザーを対象とする新規プロジェクトでは、フォールバックなしで安全に使用できます。

古いブラウザーへの対応が必要なプロジェクトでは、@supportsを使ってコンテナクエリの対応状況を確認します。

コンテナクエリには固有のパフォーマンス特性があります。container-typeを持つ各要素が、レイアウトの包含境界を作成します。これにより、内部のサイズ変更が外側に影響するのを防げます。これは実際にはパフォーマンス上の利点です。メディアクエリによる変更では、ページ全体のレイアウト再計算が発生する場合があります。

Chrome DevToolsでは、Elementsパネルのコンテナ要素の横に「cq」バッジが表示されます。これをクリックすると、コンテナの境界を可視化し、DevToolsのレイアウトインスペクターでコンテナクエリの条件をテストできます。

デザインシステムのカードコンポーネントを、どのコンテキストでも利用可能な幅に応じて、縦積みレイアウトと横並びレイアウトの間で切り替える必要があります。どの方法が適していますか。

メディアクエリはグローバルなビューポートに応答し、コンテナクエリは親コンテナのサイズに応答します。グローバルなレイアウトの決定やユーザー設定のクエリにはメディアクエリを使用します。コンテキストに合わせて適応する必要がある再利用可能なコンポーネントには、コンテナクエリを使用します。両方を組み合わせ、ページ全体のマクロなレイアウトにはメディアクエリ、そのレイアウト内でのコンポーネント単位の適応にはコンテナクエリを使います。