コンテナクエリ単位計算機とは
コンテナクエリ単位はビューポート単位と同様に機能しますがビューポートではなくクエリコンテナを基準とします。cqiはコンテナのインラインサイズの1%、cqwはコンテナ幅の1%、cqbはコンテナのブロックサイズの1%、cqminとcqmaxはcqiとcqbの最小値と最大値です。これらによりコンポーネントがブラウザウィンドウではなく自身のコンテナに適応するコンポーネントレベルのレスポンシブサイズ設定が可能になります。
クイックアンサー
コンテナクエリ単位（cqi、cqw、cqb、cqmin、cqmax）をclamp()と併用してコンポーネントレベルのレスポンシブサイズ設定を行います。ビューポート単位のように機能しますが親コンテナの幅に応じて拡大縮小します。親にcontainer-type: inline-sizeを設定し子スタイルでclamp()式を使用します。
Last updated: 2026-05-28
制限事項
- コンテナクエリ単位を使用するには祖先にcontainer-typeが設定されている必要があります。確立されたコンテナコンテキストがない場合ビューポート相対の動作にフォールバックし意図よりもはるかに大きな値を生成する可能性があります。
- コンテナクエリ単位のブラウザサポートはコンテナクエリのサポートと一致します：Chrome 105以上、Firefox 110以上、Safari 16以上、Edge 105以上。古いブラウザはこれらの単位をまったく認識しません。
- 複数のコンテナ祖先が存在する場合container-typeが設定された最も近い祖先が使用されます。深くネストされたコンポーネントが誤ってより近いコンテナを参照すると予期しない動作が発生する可能性があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- CSSプロパティの最小サイズと最大サイズをピクセル単位で入力します。
- コンテナの幅の範囲を設定します。プロパティが最小値に達する最小コンテナ幅と最大値に達する最大幅です。
- コンテナクエリ単位とCSSプロパティ名を選択します。
- clamp()式をコピーし親要素にcontainer-type: inline-sizeが設定されていることを確認します。
主な用途
- カードのタイトルのフォントサイズをビューポート幅ではなくカード幅に応じて拡大縮小します。
- 利用可能なコンテナスペースに適応するコンポーネントのパディングを作成します。
- すべての要素がウィジェットコンテナに比例して拡大縮小するダッシュボードウィジェットを構築します。