CSS Container Queriesでレスポンシブデザインを進化させる

  • #CSS
  • #Container Queries
  • #レスポンシブデザイン
  • #フロントエンド

CSS Container Queriesでレスポンシブデザインを進化させる

導入

ページ全体のビューポート幅を基準にしたメディアクエリは、長らくレスポンシブデザインの定番手法でした。しかし、複数のレイアウトで再利用されるコンポーネントが一般的になった現在では、親レイアウトの影響を受けずに自律的に振る舞う仕組みが求められます。CSS Container Queries（コンテナクエリ）は、コンポーネント自身が置かれたコンテナのサイズを観測し、その状況に応じてスタイルを切り替える次世代の手法です。本記事では基本的な使い方から応用テクニック、実務での利点までを整理します。

前提条件

  • CSSでメディアクエリを記述した経験がある。
  • ブラウザの開発者ツールでスタイルを検証できる。
  • 最新版の主要ブラウザ（Chrome、Edge、Safari、Firefox）を利用できる。

ステップ1

コンテナクエリを利用するためには、基準としたい親要素に container-type（または container ショートハンド）を指定します。一般的には横幅を監視する inline-size を設定し、子要素のスタイルを切り替えるための土台を用意します。

.card-list {
  container-type: inline-size;
}

container-type を宣言していない要素に対して @container ルールを記述しても反応しないため、まずは監視したいコンテナを明示することが最初のステップです。

ステップ2

コンテナが定義できたら、@container ルールを使って子コンポーネントのレイアウトを切り替えます。以下はカードリストの幅が600px以上になった場合にカードを横並びにする例です。

<section class="card-list">
  <article class="card">
    <h2>タイトル</h2>
    <p>テキスト内容</p>
  </article>
  <article class="card">
    <h2>タイトル</h2>
    <p>テキスト内容</p>
  </article>
</section>
.card {
  background: #f7f9fc;
  padding: 1rem;
  border-radius: 8px;
}

@container (min-width: 600px) {
  .card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }
}

画面サイズがどうであっても、section.card-list の幅が条件を満たせば display: flex が適用され、カードが横並びになります。親レイアウトが変わってもコンポーネントの振る舞いが一定に保たれる点が大きなメリットです。

ステップ3

複数のコンテナを制御したい場合は、container-name を使って名前を付けると管理しやすくなります。また、min-width 以外の条件と組み合わせた複合クエリも記述可能です。

header {
  container-type: inline-size;
  container-name: header;
}

@container header (min-width: 800px) {
  nav ul {
    display: flex;
    gap: 1rem;
  }
}

@container (min-width: 600px) and (orientation: landscape) {
  .card {
    flex-direction: row;
  }
}

名前付きコンテナを使うと、特定のコンポーネントに対してのみクエリを実行できます。また、向きやアスペクト比といった追加条件を組み合わせれば、より細かなレスポンシブ挙動を実現できます。

ベストプラクティス

  • コンテナを設置する要素を明確にし、階層構造を整理してからスタイルを記述する。
  • 既存のメディアクエリと併用し、ページ全体の構造とコンポーネント単位の調整を役割分担する。
  • 非対応ブラウザ向けに安全なフォールバック（グリッドやブロックレイアウトなど）を用意しておく。
  • デザインシステムでは、コンテナタイプと名前をコンポーネント仕様書に明記し、開発・デザイン間で共通理解を持つ。

よくある質問

  • Q. 対応ブラウザはどこまで広がっていますか？ A. Chrome、Edge、Safari、Firefoxの最新バージョンで利用できますが、IEや旧バージョンは非対応です。必要に応じてフォールバックを検討してください。
  • Q. container-type を忘れるとどうなりますか？ A. コンテナとして認識されず、@container 内のスタイルは一切適用されません。まずは監視したい要素に container-type を設定することが必須です。
  • Q. メディアクエリはもう不要ですか？ A. ページ全体のレイアウト調整には引き続きメディアクエリが有効です。コンテナクエリはコンポーネント単位の調整に向いており、両者を併用するのが現実的です。

まとめ

CSS Container Queriesは、コンポーネント自身のコンテキストに応じてスタイルを最適化できる強力な手段です。メディアクエリと組み合わせることで、再利用性の高いモジュール設計と堅牢なレスポンシブ体験を同時に実現できます。次のプロジェクトでは、主要コンポーネントにコンテナクエリを導入し、デザインシステム全体の柔軟性を高めてみてください。