サイドバーに置いたお知らせカードが、幅の狭いところで横並びのまま崩れる。メディアクエリで直そうとすると、同じ画面幅でもメインカラムでは正しく出ているので、分岐が増えていく。この症状にコンテナクエリを入れても、「書いたのに何も変わらない」で止まることがあります。
対応ブラウザは揃っているのに、あまり使われず、誤解もされやすい、という指摘が9月にSmashing Magazineで出ていました。誤用の原因として挙げられていたのは、メディアクエリと見た目がそっくりなことです。
同じ形をしているが、測っているものが違う
@media (width > 40rem) と @container (width > 40rem) は、書き方がほとんど同じです。この見た目の近さが、そのまま誤用につながります。
メディアクエリが見ているのはビューポート、つまり画面そのものです。コンテナクエリが見ているのは、その要素を包んでいる祖先要素の寸法です。同じカードでも、メインカラムに置けば広く、サイドバーに置けば狭い。その置き場所に応じて切り替えるための仕組みです。
したがって、画面幅で分岐したい箇所をコンテナクエリに置き換えても、得るものはありません。レイアウト全体の構成、つまりサイドバーを出すか出さないかのような判断は、これまでどおりメディアクエリの仕事です。
| 分岐したいもの | 使うもの |
|---|---|
| ページ全体の骨格（段組み、サイドバーの有無） | メディアクエリ |
| 部品の中身（カードの縦横、要素の省略） | コンテナクエリ |
| 印刷・配色の好み・動きの抑制 | メディアクエリ（機能ごとの条件） |
効かないときに見る順番
@container を書いても何も起きない場合、原因はほぼ決まった場所にあります。
- 包んでいる要素に
container-typeが指定されているか。inline-sizeを親側に置かないと、子の@containerは参照先を持ちません - 参照しているのが意図した祖先か。名前（
container-name）で指定しない場合、container-typeを持つ祖先のうち、いちばん近いものが選ばれます。途中に別のコンテナがあると、そちらを見ます - 要素が自分自身を参照していないか。コンテナ自身のサイズを、そのコンテナのクエリで変えることはできません。幅が変わればクエリの結果が変わり、また幅が変わる、という循環になるためです
図で見るべきは2番目の項目です。container-type を持つ要素が入れ子になっている場合、子が参照するのは外側ではなく、いちばん近い内側のほうです。意図した幅で分岐しないときは、自分と祖先の間に別のコンテナが挟まっていないかを先に確認してください。特定の祖先を基準にしたい場合は、その祖先に container-name で名前を付け、@container 側でその名前を指定します。
3つ目は理解の入口でつまずきやすい点です。カードの幅そのものを @container で変えるのではなく、カードを包む箱を基準にして、中身の並びを変える、と考えると設計が素直になります。
置き換える価値があるのはどこか
既存サイトのCSSを全部書き換える話ではありません。効くのは、同じ部品を複数の場所に置いている箇所です。
長く運用されてきたサイトのCSSでは、card--sidebar card--narrow card--footer のように、置き場所ごとに派生クラスが増えていることがあります。中には「幅が違う」だけの理由で生まれたものもあります。そうした派生をコンテナクエリに寄せると、部品が1つに戻ります。
逆に、1か所にしか置かれない部品、そもそも幅が変わらない部品には入れる理由がありません。コンテナを増やすほど、どの祖先を見ているかを追う手間が増えます。
部品として作り直す側の組み方はコンテナクエリで置き場所に左右されないUIを作るに整理しています。どの機能を前提にしてよいかの判断はBaselineで対応範囲を決める、JavaScriptで補っていた処理をCSSへ戻す流れは配信するJavaScriptを減らすが参考になります。
古いブラウザをどう扱うか
コンテナクエリに対応していない環境では、@container の中身が丸ごと無視されます。この性質は、書き方の順序で扱えます。
狭いほうの見た目を通常のCSSとして書き、広いときの変化を @container の中に入れておけば、未対応の環境では狭いほうの見た目で表示されます。崩れるのではなく、変化しないだけになります。逆に広いほうを既定にすると、未対応環境で狭い場所に広いレイアウトが出て崩れます。
手を付ける場所の選び方
改修の入口は、派生クラスがいちばん多い部品です。そのクラスがなぜ分かれているかを1つずつ見て、「幅が理由」のものだけを数えてください。編集部の目安では、その数が3つ以上あれば、コンテナクエリに寄せる価値があります。1つか2つなら、今のままで構いません。
2026年9月24日に、Smashing Magazineの記事とMDNの解説をWeb検索で確認しました。本記事で扱ったCSSの挙動について、ブラウザごとの実機確認や既存サイトへの適用は行っていません。仕様の整理と改修の判断材料です。
既存サイトのCSS改修や、部品の作り直しの相談は、グリームハブへご相談ください。
