移行中の知識
コンテナクエリー
Container Query
定義
コンテナクエリー（Container Query）とは、viewport全体ではなく、componentを包むquery containerのsizeやfeaturesを条件に、そのdescendantのpresentationを切り替えるCSSの仕組みです。responsive designでは、同じcomponentがmain column、sidebar、card gridなど異なる幅へ置かれても、そのcomponent自身が実際に使える領域に応じてlayoutを変えられます。page全体の構造をviewport条件で切り替えるMedia Queryとは役割が重なる部分もありますが、判断基準にする領域が異なります。
関連
対比すると分かりやすい概念
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
service website / dashboard
同じcardをPCのmain columnとsidebarで使い分ける
見るポイント
viewport幅は同じdesktopでも、main columnでは画像と本文を横並びにし、狭いsidebarでは縦積みにする。device名やwindow幅ではなく、card containerのavailable inline sizeを基準に構成を変える。
CMS-driven landing page
smartphoneとPCで再利用されるpromo componentを局所適応させる
見るポイント
smartphoneでは全幅、PCでは2column gridの一枠へ入る同じpromoを、page用breakpointだけに依存せずcontainer幅へ応答させる。componentを別pageへ移した時も、置かれた領域に応じて読みやすい並びを保てるかを見る。
注意
誤解しやすい点
- Container QueryをMedia Queryの完全な置き換えだと考え、page全体のviewport条件まで無理にcomponent側へ移す。
- containerの実際の幅ではなく、結局mobile・tablet・desktopのdevice分類をそのまま条件名として持ち込む。
- componentごとに細かいqueryを増やしすぎ、自然なfluid layoutで吸収できる中間幅まで段階的切替にする。
関連
関連する概念
出典