このページは Cloud Translation API によって翻訳されました。

安定版のブラウザにコンテナクエリが配信される

今年のバレンタインデーは、すべての安定版ブラウザにサイズコンテナクエリとコンテナクエリユニットが導入されたことをお祝いします。

Una Kravets

コンテナクエリの活用が進んでいます。今年のバレンタインデーは、すべての最新ブラウザで、サイズのコンテナクエリとコンテナクエリの単位が変わりました。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

コンテナクエリを使用すると、親要素のスタイル情報（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 がこれらの値の範囲内にある場合、テキストはそれに応じて縮小および拡大します。

コンテナクエリ（Valentine）

コンテナクエリ愛を祝して、このホリデーシーズンを祝して、どの（最新バージョン）の安定したブラウザを使っていても、バレンタインを楽しめます。