知っておくと便利なCSSの単位: コンテナクエリに基づく相対単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を解説

CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。

第3弾となる今回はコンテナクエリに基づく単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を紹介します。

Container query length units -Going beyond pixels and (r)ems in CSS
by Brecht De Ruyte

第1弾・第2弾は、下記をご覧ください。

• フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
• ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• CSSの単位: cqwとは
• CSSの単位: cqhとは
• CSSの単位: cqi, cqbとは
• CSSの単位: cqmin, cqmaxとは
• 終わりに

はじめに

シリーズの第3弾となるこの記事では、コンテナに基づいた単位について解説します。はい、その通りです、ついにコンテナ要素に基づいた単位がすべてのブラウザで使用できるようになりました。これは個人的な感想ですが、コンテナクエリはまだ広く使用されていない思います。
参考: CSS コンテナクエリの準備はできてる？ 安定版のブラウザにサポート、ポリフィルも大幅にアップデートされました

今回もこれまでと同様に、MDNのリストに基づいており、各単位の基本的なことだけでなく、より実践的な使い方まで解説します。

コンテナクエリの単位を使用するための基礎知識

まずは、対象となるコンテナが必要です。HTMLは下記の通りです。

次に、CSSでcontainer-typeを設定し、max-widthも設定しました。

そして、ここからが重要な部分ですが、何が起きているのかを視覚化するためのスタイルを加えます。

これで準備は完了です、container-typeを設定し、基本的なスタイルを追加しました。次は、コンテナクエリの各単位について詳しく解説します。

CSSの単位: cqwとは

CSSのcqw単位とは、コンテナ要素の幅を表す相対単位です。1cqwはコンテナ要素の幅の1%に相当します。たとえば、コンテナの幅を100pxに設定すると、50cqwは50pxになります。ビューポートに対する相対単位vw単位とは対照的に、そのコンテナの幅に対する要素のサイズを定義することができます。ただし、ビューポートやフォントの単位と同様に、font-size, width, padding, marginなどの<length>値を受け入れるすべてのプロパティで使用できます。

デモには千の言葉以上に意味があるので、さっそく見てましょう。
前述のコンテナ内の.itemに以下のCSSでマージンを追加してみます。

これで.itemにはコンテナに基づいたマージンが設定されます。デモでコンテナのサイズを変更して試してみてください。

See the Pen
Basic container unit example by coliss (@coliss)
on CodePen.

続いて、他のプロパティにもcqw単位を使って追加してみます。

max-width値の異なるコンテナを追加すると、cqw単位の挙動がよく分かると思います。もちろん、それぞれの幅を変更してその可能性を確認してみてください。

See the Pen
Margins, padding and font-size with container units by coliss (@coliss)
on CodePen.

親にcontainer-typeを設定しなかった場合は、どうなると思いますか？

その場合、コンテナクエリの単位はビューポート単位（この場合はvw）にフォールバックします。

CSSの単位: cqhとは

CSSのcqh単位とは、cqwが幅を表すのと同様に、コンテナ要素の高さを表す相対単位です。1cqhはコンテナ要素の高さの1%に相当します。たとえば、コンテナの高さを100pxに設定すると、50cqhは50pxになります。

前述のデモをすこし変更して、.itemのCSSをcqh単位に変更してみます。

しかし、これだけではあまり効果がありません。高さなので、ブロック軸を使用するにはcontainer-typeも変更する必要があります。

あとは、幅の代わりに、コンテナの高さも変更します。

これで、コンテナの高さが考慮されていることが分かります。

See the Pen
Container units based on height by coliss (@coliss)
on CodePen.

実践的な例は、次の2つの単位がもっとも重要であるため、そこで解説します。

CSSの単位: cqi, cqbとは

デフォルトで論理バリアントを使用するのは、とても良い習慣だと思います。私も論理バリアントをよく使用しますが、そのほとんどはRTLのライティングモードです。これはこの違いには当てはまりませんが、将来的に何が起こるかは分からないので、習慣にしておくのは良いことでしょう。

• CSSのcpi単位とは、コンテナ要素のインライン軸の1%を表す相対単位です。欧米言語は読み取り方向が左から右のため、水平方向になります。たとえば、コンテナのインラインサイズを100pxに設定すると、50cpiは50pxになります。
• CSSのcqb単位とは、コンテナ要素のブロック軸の1%を表す相対単位です。欧米言語では垂直方向ですが、モンゴル語では読み取り方向が上から下のため、これは水平方向になります。たとえば、コンテナのブロックサイズを100pxに設定すると、50cqbは50pxになります。

さっそく、実践的な例を見てましょう。
バナーをメインコンテンツからサイドバーに移動させ、それに基づいてサイズを調整するcqi単位のデモページを実装します。

HTMLはメインコンテンツとサイドバーの2カラムのグリッドで、2つの子にcontainer-typeを与えます。

次に、バナーを作成し、メインコンテンツに配置します。

インライン軸で作業をしたいので、cqi単位を使ってバナーのスタイルを設定します。

これで準備は完了です。
さっそく、バナーをサイドバーにコピペしてみます。cqi単位を使用すると、コンテナ要素に依存されるので下記のようにバナーのスタイルが変化します。

メインコンテンツとサイドバーに同じバナーを配置

実際の動作は、デモページでご覧ください。
※分かりやすくするため、スタイルをいくつか追加しています。

See the Pen
Multiple banners with container units by coliss (@coliss)
on CodePen.

メインコンテンツとサイドバーに配置された2つのバナーを比べると、paddingは問題ないですが、font-sizeがサイドバーではすこし小さいようです。これはfont-sizeに最小値と最大値を設定することで調整できます。そうです、前回の記事で解説した流動的なタイポグラフィのテクニックを使用します。

バナーのfont-sizeの設定にclamp()関数を使用してみます。

最小値に1.3rem、最大値に1.5remを設定しました。これによりルックアンドフィールが格段によくなります。
下記はこのアップデートをしたデモページです。

See the Pen
Banner with container units and clamp() function for font-sizes by coliss (@coliss)
on CodePen.

もちろん、font-sizeだけでなく、marginやpaddingにも適用できます。表示サイズを変更して、どのように動作するかご覧ください。

デモページのCSSには、コメントでwriting-mode: tb-rl;があります。このコメントをはずして有効にすると、ライティングモードが変わり、別のレイアウトを見ることができます。

すべては論理的であることが重要です、CSSがおこなうことは奇跡であり、美しく、魔法のようです。

ライティングモードを変更した場合

cqbと宣言された高さ

ブロックサイズにコンテナクエリの単位を使用する場合、ちょっとした問題があります。その場合、コンテナは宣言された高さを持つ必要があるということです。ない場合は、オーバーフローしてしまいます。これは残念ながら、仕様における制限の一つです。

次の実践的な例は、小さなバナーを作成し、ブロックの高さに応じてfont-sizeを設定します。
HTMLは、下記の通りです。

ビューポートの高さの80%が必要ですが、別のページでは変更できるようにCSSを設定します。

cqb単位をclamp()関数内でどのように使用したかに注目してください。実際の動作は、デモページでご覧ください。

See the Pen
cqb container unit example by coliss (@coliss)
on CodePen.

CSSの単位: cqmin, cqmaxとは

CSSのcqmin単位とcqmax単位は、コンテナ要素の幅と高さの両方に基づいて動的なサイズ設定ができる相対単位です。この2つの単位は、アスペクト比やコンテナの形状に適用するスタイルを定義できます。

• CSSのcqmin単位とは、cqi（インラインサイズの1%）またはcqb（ブロックサイズの1%）の小さい方の値を表します。たとえば、インラインサイズが100pxで、ブロックサイズが200pxの場合、50cqminは50pxになります。
• CSSのcqmax単位とは、cqiまたはcqbの大きい方の値を表します。たとえば、インラインサイズが100pxで、ブロックサイズが200pxの場合、50cqmaxは100pxになります。

これらの単位は、ビューポートによってコンテナの形状が変化する場合に特に便利です。バナーの例でみてましょう。paddingにcqiの代わりにcqmaxを使用して、ブロックサイズとインラインサイズの間の最大値を考慮してみます。

実際の動作は、デモページでご覧ください。
表示サイズを変更して、アスペクト比が変わるとどうなるか実感してみてください。

See the Pen
Using cqmax for paddings - resize for effect by coliss (@coliss)
on CodePen.

終わりに

2024年にデベロッパーが使いこなせるようになる必要がある単位は、このコンテナクエリの単位とそれに付随する単位でしょう。CSSを日常的に使用している場合は、将来のために備えておく必要があると思います。

私はすこし完璧主義なので、絶対単位を無視することはできませんが、ここまで解説した相対単位も楽しみたいと思います。