レスポンシブデザインのサイトでは、デバイスの幅に応じてカラムの幅を可変にしたり、横に並べる要素の数を変更したり、それに伴いフォントサイズを調整が必要になるというようなことがよくあります。すべてのパターンで適切に表示させようとすると、多くのメディアクエリを用意したり、calc()や clamp()などの関数を駆使したりと、かなりの労力を要します。
しかし、近年登場した「コンテナ要素に基づく相対単位（cqw、cqh、cqi、cqb、cqmin、cqmax）」を使用することで、そうした負担を軽減できるかもしれません。
特にその中でも重要なのが、幅に関連した cqw という単位です。cqwを使用したサイズ指定を行うことで、異なる幅のデバイスで見た時でも同じようなバランスの取れた表示が可能になります。
「cqw」を使うための下準備
まずは、親となる要素（コンテナ要素）を用意します。
<div class="container"></div>この要素に、container-type: inline-size;を設定します。
.container {
container-type: inline-size;
}これで、この要素の幅を基準にして、中にある子要素や孫要素のサイズを相対的に指定することが可能になりました。次は、単位について説明していきます。
コンテナ幅を基準とした相対指定単位「cqw」
cqwは、コンテナ要素の幅をパーセントで表した単位です。つまり、1cqwは、コンテナ要素の幅の 1% のサイズです。コンテナ要素の幅が 360px のとき、子要素のフォントサイズに5cqwという指定があれば、その子要素のフォントサイズは 18px で表示されます。
See the Pen cqw sample 1 by YUTSUZO (@YUTSUZO) on CodePen.
cqwはfont-sizeだけでなく、width, height, padding, marginなどの、サイズを指定できるすべてのプロパティで使用できます。
ちなみに、親要素にcontainer-typeを指定しなかった場合、cqwはビューポートのサイズを基準にした相対指定、つまりvwと同じ挙動になります。
cqw を使用したカード型レイアウトのデモ
以下のデモでは、widthがそれぞれ異なるコンテナ要素に対して、カード内の余白や文字の大きさが変化していることが確認できます。
See the Pen cqw sample 2 by YUTSUZO (@YUTSUZO) on CodePen.
cqw 以外の、コンテナ要素のサイズに基づく相対単位
コンテナ要素のサイズに基づく相対単位は、cqw 以外にもいろいろあります。
cqw: 幅のパーセント値cqh: 高さのパーセント値cqi: インラインサイズのパーセント値cqb: ブロックサイズのパーセント値cqmin: インラインサイズまたはブロックサイズの小さい方のパーセント値cqmax: インラインサイズまたはブロックサイズの大きい方のパーセント値
インラインサイズ、ブロックサイズというのは、書字方向（writing-mode）に応じた水平または垂直方向のサイズです。横書きの場合、cqiはcqw、cqbはcqhと同義で、縦書きの場合、cqiはcqh、cqbはcqwと同義になります。
いまのところ、cqw以外の単位については使いどころが思いつきませんが、頭の片隅に入れておくといつか役に立つときがくるかもしれません。
まとめ
- 親要素に container-type: inline-size; を設定することで、親要素の幅に応じたスタイル調整が可能になる。
- cqw（コンテナ幅の1%）を用いることで、フォントサイズやレイアウトの要素を親要素の幅に対して相対的に設定できる。
- cqw の他にも、cqh（コンテナ高さの1%）、cqi（インラインサイズの1%）、cqb（ブロックサイズの1%）、cqmin、cqmax などの単位がある。
これらを活用することで、より柔軟なレスポンシブデザインを実現できるようになるでしょう。
