【CSS】コンテナクエリに基づく単位（cqw, cqh, cqi, cqb, cqmin, cqmax

https://coliss.com/articles/build-websites/operation/css/container-query-length-units.html

コンテナ要素に基づいた単位がすべてのブラウザで使用できるようになりました。

<div class="container">
  <div class="item">A cool container item</div>
</div>

container {
  container-type: inline-size;
  max-width: 800px;
}

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

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

.item {
  /* 前述のコードは略 */
  margin: 5cqw;
}

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

.item {
  margin: 6cqw;
  padding: 1cqw;
  font-size: 5cqw;
}

親にcontainer-typeを設定しなかった場合は、どうなると思いますか？
その場合、コンテナクエリの単位はビューポート単位（この場合はvw）にフォールバックします。

cqh … container-type: size;

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

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

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  > * {
    container-type: inline-size;
  }
}

CSSのcqmin単位とcqmax単位は、コンテナ要素の幅と高さの両方に基づいて動的なサイズ設定ができる相対単位