CSS/Container Query Units

Container Query Units

CSSには、要素のコンテナサイズを基準とした相対単位であるContainer Query Unitsが導入されています。これにより、コンテナサイズに基づいてスタイルを柔軟に適用することが可能になります。これらの単位は、コンテナクエリをサポートする場面で非常に有用です。

単位一覧

単位	説明	例
cqw	コンテナのインライン軸の幅の1%を基準とする	`width: 50cqw;`
cqh	コンテナのブロック軸の高さの1%を基準とする	`height: 100cqh;`
cqi	コンテナのインライン軸の1%を基準とする（縦書きや横書きに応じて動的）	`padding: 10cqi;`
cqb	コンテナのブロック軸の1%を基準とする	`margin: 5cqb;`
cqmin	コンテナの幅と高さの小さい方の1%を基準とする	`font-size: 2cqmin;`
cqmax	コンテナの幅と高さの大きい方の1%を基準とする	`border-radius: 5cqmax;`

使用例

以下は、Container Query Unitsを用いたスタイル設定の例です。

.container {
  container-type: inline-size; /* コンテナクエリを有効化 */
}

.item {
  width: 50cqw;     /* コンテナの幅の50% */
  padding: 10cqi;   /* インライン軸の10%の余白 */
  font-size: 2cqmin; /* コンテナの最小寸法の2% */
}

利用シナリオ

レスポンシブコンポーネント: コンテナサイズに基づいてボタンやカードのレイアウトを調整。
動的なスタイル変更: テキストサイズやマージンを、親コンテナのサイズに応じて変更。

注意事項

ブラウザサポート: すべてのブラウザで完全にサポートされているわけではないため、使用前に互換性を確認してください。
container-typeの指定: Container Query Unitsを使用する要素の親に、container-typeプロパティで適切な設定が必要です。

参考

Container Query Unitsを活用することで、親コンテナのサイズに基づいた柔軟なデザインを作成することが可能です。