メディアクエリの時代は終了？「CSSコンテナクエリ（@container）」で実現する真のコンポーネント指向UI

📖 推定読了時間：約6分

これまでのレスポンシブWebデザインにおいて、私たちは常に `@media (min-width: 768px)` のような「メディアクエリ（Media Queries）」を頼りにしてきました。しかし、現代のWebフロントエンドはReactやVue、Astroなどによる「コンポーネント指向開発」が主流です。

同じ「記事カード」コンポーネントであっても、メインコンテンツ領域の広いカラムに置かれたときは横長レイアウト、サイドバーの狭い領域に置かれたときは縦積みレイアウトにしたい……。これをメディアクエリだけで実現しようとすると、「サイドバー内のときはこのクラスを付けて……」といった親の配置場所に依存する煩雑なCSSハックに追われていました。

その悩みを根底から解決するのが、全主要モダンブラウザで利用可能となった「CSSコンテナクエリ（Container Queries: @container）」です。

メディアクエリの根本的な限界とコンポーネント設計の摩擦

メディアクエリは「閲覧デバイスの画面サイズ」を判定する仕様です。そのため、タブレットやPCのような大画面デバイスであっても、画面内の「狭いグリッドカラム」や「アコーディオンの中」に配置されたコンポーネントは、依然として狭い空間に押し込められています。

結果として、コンポーネント自身が自分が置かれている文脈（Context）を推測できず、デザインシステムの再利用性が著しく損なわれていました。グリッドシステムやフレキシブルな配置を深く理解するには モダンCSSグリッドデザインパターン設計ハンドブック などが極めて有益ですが、コンテナクエリの登場によって、CSSのレイアウト設計は根本的なパラダイムシフトを迎えています。

CSSコンテナクエリの基本構文：2ステップで完了

コンテナクエリの導入手順は、驚くほどシンプルです。親要素をコンテナとして宣言し、子要素内で `@container` ルールを記述するだけです。

ステップ1：親要素をコンテナとして定義する

.card-container {
  container-type: inline-size;
  container-name: card; /* 任意：名前を付けて明示的にターゲット可能 */
}

`container-type: inline-size;` を指定することで、ブラウザに対して「この要素のインライン方向（幅）のサイズ変化を監視せよ」と指示します。

ステップ2：子要素で @container を記述する

.card {
  display: flex;
  flex-direction: column; /* デフォルトは縦積み */
  gap: 16px;
}

/* 親コンテナの幅が 480px 以上になったら横並びに変化！ */
@container (min-width: 480px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

フォントサイズも親幅に連動する「cqw / cqh」単位の活用

コンテナクエリの導入に伴い、新しいCSS相対単位「コンテナクエリ長単位（Container Query Units）」が追加されました。

• ✅cqw：コンテナの幅（Query Container Width）の1%
• ✅cqh：コンテナの高さ（Query Container Height）の1%
• ✅cqi：コンテナのインラインサイズの1%

従来の `vw` 単位では画面全体のサイズに引っ張られて巨大化していた見出しテキストも、`font-size: clamp(1rem, 4cqi, 2.5rem);` のように指定することで、親カードの幅に完璧に比例した流麗なタイポグラフィを実現できます。視覚的に心地よい文字組みの設計には モダンWebタイポグラフィ・CSSデザイン設計実践ガイド や WebフロントエンドUI/UX・Webアクセシビリティ実践入門書 のアプローチがそのまま活きてきます。

現場導入時の注意点：無限ループを防ぐContainmentの壁

コンテナクエリを使う上で必ず知っておくべき落とし穴があります。それは、「子要素のサイズによって親コンテナの幅が決まる（autoサイジング）構造では使えない」という点です。

もし子要素の幅で親の幅が決まり、その親の幅に応じて子要素が拡大すると、ブラウザ内部でサイズ計算の無限ループ（レイアウトスラッシング）が発生してしまいます。そのため、`container-type` を指定する親要素は、外側のグリッドや幅100%など「外部からの制約」によって幅が確定する構造にしておく必要があります。

まとめ

コンテナクエリの登場により、CSSはようやく現代の「コンポーネント指向」に追いつきました。メディアクエリはページ全体の大枠レイアウトを制御し、個々のUIパーツはコンテナクエリで自律させる——この役割分担こそが、保守性の高い次世代デザインシステムの黄金律です。

まずはよく使い回す汎用カードやウィジェットから、コンテナクエリへの置き換えを試してみてはいかがでしょうか！