コンテナクエリーのcqwの使い方

cqw, cqhとは？

cqw、cqhは、コンテンツサイズを参照する単位です。

コンテンツクエリ―単位はコンテンツサイズを参照する単位です。font-size: 4cqw; みたいに使います。

使い方

親コンテナをクエリ―コンテナとして宣言する。container-type: inline-size;

その子孫でコンテナ―クエリ―単位を使用する。font-size: 4cqw;

cqw単位は、直近の先祖のクエリ―コンテナのサイズを参照します。

css

.container {
 container-type: inline-size;
 container-name: qc;
}
.cardA {
 font-size: 4cqw;
}

html

<div class="container">
 <p class="cardA">Hello World!</p>
</div>

Sample.1

単純にcqwを使用してみる。

*以下全て、windowサイズを大小変更して確認するテストです。

説明

widthとfont-sizeにcqwを使用してみました。

フォントは10pxより小さくならないかもしれませんね。

また、この場合はcontainer-name は無くてもよい。

Sample.2

説明

このコンテナ―はcontainer定義されていません。よって、cqwはこのコンテナを参照しません。

先祖にクエリ―コンテナを見つけられないと、windowサイズを参照するようです。結果、vwと同じ幅になるかな。

このエリアのテストはPCでwindowを横一杯に広げるとわかりやすいです。十分に横サイズが広いと中のp要素は親コンテナをはみ出します。

Sample.3

説明

container3,4の両方にクエリ―コンテナ―の宣言がされています。

cqw単位が、直近のcontainer4を参照していることを確認するテストです。

CSS Container Query Unit

Container Query – Can I Use

CSS Container Queries – MDN

CSS Container Query Unit 系

cqw, cqh, cqi, cqb, cqmin, cqmax があります。

• cqw : クエリ―コンテナの幅
• cqh : クエリ―コンテナの高さ
• cqi : クエリ―コンテナのinlineサイズ
• cqb : クエリ―コンテナのblockサイズ
• cqmin : cqi,cqbの小さい方
• cqmax : cqi,cqbの大きい方

CSS Container Queries (Size)

@container(){}

名称はコンテナクエリ―なんだと思う。

クエリ―コンテナのサイズ条件で動作します。

sample.A

説明

コンテナクエリ使用。@container

containerAが500pxで切り替わる。flexの方向と背景色を切り替えている。

containerA自体はクエリ内で使用できない。子孫のboxAはもちろん使用できる。

コンテナクエリ内でp要素など広いガバガバ定義をすると、他の、全ての、コンテナクエリ内のp要素に反応する。そうでないp要素には影響しない。

sample.B

説明

それぞれのクエリ―コンテナの400pxでSW

先祖に幾つかのクエリ―コンテナがある場合、nameを指定して参照できる。

containerB2にある要素（B1）は、containerB1をname参照している、コンテナクエリ―で定義されている。よって、祖先のcontainerB1のサイズを参照する。結果、containerB1(400px)のとき、50cqw(B1)の背景色が変わります。

先祖のサイズを参照することが多用されるかは知らんけど。

備考：ちょっとメモ

コンテナクエリ単位は、最寄りのクエリ―コンテナのサイズを参照する。

コンテナクエリ単位はいつでも最寄りのクエリコンテナを参照する。祖先の単位は拾わなかった。

もし、見つからない場合、windowのサイズを参照する。

コンテナクエリ―は、親子関係にないと意味がない。

コンテナクエリーは、nameをみて先祖を参照できる。

コンテナクエリーは、レイアウトの変更、フォントサイズの変更、width、あたりに使用するのがいいね。

qw単位は反応しなかった。

Visula Studio Code では、container-type、container-name、@container は、エラー表示の波線が表示された。そのうち対応するんだろうな。

エラー内のインテリセンスが効かないんですね。ちょっと不便だね。

開発者ツールを開くと(container)マークが要素に出現しているのでクリックすると、その範囲にボーダーが現れる。たまにバグる。

備考：JavaScript

横幅の取得方法

padding含む場合の要素の横幅

var x = container.clientWidth;

要素コンテンツの横幅

b1p.textContent = window.getComputedStyle(B1).width;

注意）box-sizing を把握しておくこと。