これまでレスポンシブ対応する際はビューポートのサイズを基準としたメディアクエリを使用してきました。
しかし、メディアクエリの場合同じパーツでも配置する場所のサイズや複数並べる際の個数によって別々のスタイルを与えて調整しなくてはならないときがありました。
その点今回紹介するコンテナサイズクエリは祖先要素のサイズを基準としているので、祖先要素のサイズに合わせた伸縮が可能となります。
container-type
まず基準としたい要素に「container-type」プロパティを指定します。
「container-type」の値は3つあり、
normal : 初期値
inline-size : インライン軸(横幅)
size : インライン軸とブロック軸(縦横幅)
基本的には「inline-size」を使用します。
container-name
複数の要素に「container-type」を指定する可能性がある場合は「container-name」プロパティで名前をつけることができ、名前を指定することで特定の要素を基準にすることができます。
以下のようにtypeとnameをまとめて記述することもできます。
container : コンテナ名 / inline-size;
条件分岐の記述はメディアクエリとほぼ同じです。
@container (min-width:300px) {}
コンテナ名を指定する際の記述は
@container コンテナ名 (min-width:300px) {}
See the Pen
Container Query by kushi (@kushi95)
on CodePen.
簡単に試してみました。
テキスト01は「container01」を基準として幅700px以上でテキストの色を赤に。
テキスト02は「container02」を基準として幅600px以下でテキストの色を青に。
テキスト03はコンテナ名を指定していないので、最も近い祖先要素「container02」が基準となります。
幅600px以下でテキストの色を橙に、幅700px以上でテキストのサイズが50pxになりますが、基準の「container02」の幅が600pxなためテキストの色だけが橙になります。
コンテナクエリで使える単位
cqw : 基準とするコンテナの幅に対する割合
cqh : 基準とするコンテナの高さに対する割合
cqi : 基準とするコンテナのインラインサイズに対する割合
cqb : 基準とするコンテナのブロックサイズに対する割合
cqmin : cqiとcqbの値を比べて、どちらか小さい方
cqmax : cqiとcqbの値を比べて、どちらか大きい方
現状コードエディターの入力補完がまだ対応していない可能性があるため少し不便な点はありますが、コンテナサイズクエリ自体はとても便利なのでこれからは状況に応じてメディアクエリと使い分けていくことになりそうです。