今年のバレンタインデイには、サイズ コンテナクエリとコンテナクエリ ユニットがすべての安定版ブラウザにリリースされます。
コンテナクエリの人気が高まっています。今年のバレンタインデイには、すべての最新ブラウザでサイズ コンテナクエリとコンテナクエリ単位が安定しています。
コンテナクエリを使用すると、親要素のスタイル情報(inline-size
など)をクエリできます。メディア クエリではビューポートのサイズをクエリできますが、コンテナ クエリでは UI 内の位置に基づいて変更できるコンポーネントを有効にできます。
コンテナクエリは、レスポンシブ デザインや再利用可能なコンポーネントに特に便利です。たとえば、カード コンポーネントを有効にして、サイドバーに配置した場合と商品グリッド内で異なる構成で配置した場合、それぞれを一方向にレイアウトできます。
コンテナクエリを使用する
コンテナクエリを使用するには、まず親要素で包含を設定します。これを行うには、親コンテナで container-type
を設定するか、container
省略形を使用してタイプと名前の両方を同時に指定します。
.card-container {
container: card / inline-size;
}
container-type
を inline-size
に設定すると、親の行方向のサイズがクエリされます。英語などのラテン語では、テキストが左から右にインラインで流れるため、カードの幅になります。
これで、そのコンテナを使用して、@container
を使用してその子にスタイルを適用できるようになりました。
.card-child {
display: grid;
grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
.card-child {
grid-template-columns: 1fr;
}
}
また、ビューポート ベースの単位値と同じように、コンテナクエリの長さの単位値を使用できます。違いは、コンテナ ユニットがビューポートではなくコンテナに対応している点です。次の例は、コンテナのクエリ単位と clamp()
関数を使用して、最小サイズと最大サイズの値を指定するレスポンシブ タイポグラフィを示しています。
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
上記の 15cqi
は、コンテナのインライン サイズの 15% を指します。clamp()
関数では、最小値は 2rem、最大値は 4rem です。15cqi
がこれらの値の間にある場合、テキストはそれに応じて縮小または拡大されます。
コンテナクエリのバレンタイン
コンテナクエリの人気が高まっているこのホリデーシーズンに、どの(最新バージョンの)安定版ブラウザでご覧いただいても楽しめるバレンタイン ギフトを用意しました。