ビューポートメディアクエリーは画面全体を基準にスタイルを切り替えます。しかし同じカードが広い本文欄と狭いサイドバーの両方で使われると、画面幅だけでは内部レイアウトを決めにくくなります。CSSのサイズコンテナークエリーを使うと、祖先のquery containerのサイズに応じて子孫のスタイルを適用できます。

CSSコンテナークエリーの例：同じカードが340pxのコンテナーでは縦積み、620pxでは横並びになり、切り替え基準は480pxです。

1. 画面全体ではなく部品の配置幅を見る

メディアクエリーはビューポートなどのメディア条件を評価します。コンテナークエリーは文書内のquery containerのサイズといった条件を評価します。そのため同じページの異なる列に置いた同一コンポーネントでも、それぞれの配置幅に合わせた内部レイアウトにできます。ページごとのブレークポイント規則を部品に複製せず再利用するときに役立ちます。

サイズを問い合わせるには祖先にcontainer-typeを指定します。inline-sizeはインライン軸のサイズcontainmentを有効にし、sizeは両軸を対象にします。これは単なる名前付けではなく、コンテナーのサイズ計算が内容に依存する仕方を変えます。宣言前後のintrinsic sizingや配置を確認し、問い合わせたい軸と要素自体のサイズ決定方法に応じて値を選んでください。

2. query containerの宣言と名前

多くの部品ではcontainer-type: inline-sizeでインライン軸に基づくクエリーを使えます。入れ子がある場合や対象を明確にしたい場合はcontainer-name、またはcontainer短縮プロパティで名前を付けます。たとえば外側をcardというコンテナーにし、子孫の@container card (width > 30rem)で条件を指定できます。名前を省くと、条件を評価できる最も近い祖先コンテナーが選ばれます。

クエリー規則は子孫にスタイルを適用します。コンテナー自身のサイズ条件で同じコンテナー自身を切り替えるものではありません。DOM上の祖先・子孫関係と名前を確認し、入れ子でどの境界を参照するか明確にします。

3. @container条件と相対単位

@containerでは幅や高さなど、宣言されたコンテナーが提供するサイズ機能を調べ、条件が一致すると子孫のスタイルを適用します。inline-sizeだけを設定したときはその条件で利用できる軸を確認し、ブロック軸を調べる必要があれば適切なcontainmentを選びます。cqiやcqbなどのコンテナー相対長さ単位は、該当するコンテナーの寸法に基づく値を表現します。ビューポート単位の一律な代替ではありません。

しきい値は端末一覧から移すのではなく、部品の内容と配置に合わせて決めます。カードなら十分な幅で画像と文章を横に置き、狭くなったら縦に積む設計が考えられます。読める文章幅、画像の表示要件、使える部品幅から切り替え点を決めます。

条件を満たすときだけ子の配置を変える例として、商品カードの価格と購入ボタンを考えます。十分なインライン幅がある場合は画像、説明、操作を横に並べ、幅が狭い場合は情報の読み順を保ったまま縦に配置します。複数のカードを異なる列幅で使っても、同じ部品自身が配置可能な領域を基準にできるのが利点です。ただし、ブレークポイントの値は内容と親レイアウトで検討します。

4. 実務家の視点：containmentと入れ子を確認

まず子の内容があるときもコンテナーが意図したサイズになるか確認します。次に各子孫がどの最も近いquery containerを選ぶか、名前の重複で対象が曖昧になっていないか調べます。長い多言語ラベル、実際の画像、狭い列で試し、はみ出しや予期しない縮小を確認してください。

コンテナークエリーは配置場所に応じた部品設計に役立ちますが、すべてのレスポンシブ判断を置き換えるものではありません。ページ全体のナビゲーションなどビューポートに結び付く変更にはメディアクエリーが適切な場合があります。対応ブラウザーと代替スタイルはプロジェクトの対象環境で確認してください。

参考資料