CSS コンテナークエリー

コンテナークエリーを使用すると、特定の要素について、そのコンテナーの次のような属性に基づいてスタイルを設定することができます。

コンテナーのサイズ
コンテナーに適用されているスタイル
コンテナーのスクロール状態、またはそのスクロール祖先のスクロール状態

コンテナークエリーは、メディアクエリーの代替となるもので、ビューポートサイズや他の端末の特性に基づいて要素にスタイルを適用します。

この記事では、コンテナークエリーを用いて、特にサイズコンテナークエリーに焦点を当てた使い方の紹介をしています。他にも、スタイルやスクロール状態コンテナークエリーについて詳しく解説しているガイドもあります。

2 つの異なる種類のクエリー。ブラウザーの全幅であるビューポートの幅に基づくメディアクエリーと、コンテナー要素の幅であるコンテナーコンテキストの幅に基づくコンテナークエリー。

コンテナークエリーの使用

コンテナークエリーを使用するには、要素でコンテナーコンテキストを宣言し、後でこのコンテナーの寸法をクエリーしたいとブラウザーが認識できるようにする必要があります。これを行うには、 container-type プロパティに size、inline-size、normal の値を指定して使用します。

これらの値は以下のような効果があります。

size: クエリーは、コンテナーのインラインおよびブロック軸の寸法に基づきます。レイアウト、スタイル設定、サイズ拘束をコンテナーに適用します。
inline-size: クエリーは、コンテナーのインライン軸の寸法に基づきます。その要素にレイアウト、スタイル設定、インラインサイズ拘束を適用します。
normal: 要素はコンテナーサイズクエリーのクエリーコンテナーではありませんが、コンテナースタイルクエリーのクエリーコンテナーであることに変わりはありません。

次の例では、タイトルとテキストを持つブログ記事用のカード部品を考えてみましょう。

html

<div class="post">
  <div class="card">
    <h2>カードのタイトル</h2>
    <p>カードのコンテンツ</p>
  </div>
</div>

コンテナーコンテキストは container-type プロパティを使用して作成することができます。

css

.post {
  container-type: inline-size;
}

次に、 @container アットルールを使用してコンテナークエリーを定義します。次の例のクエリーは、コンテナーコンテキストを持つ最も近い祖先のサイズに基づいて要素にスタイルを適用します。具体的には、このクエリーは、コンテナーの幅が 700px よりも広い場合、カードのタイトルに大きなフォントサイズを適用します。

css

/* カードタイトルの既定のスタイルを設定 */
.card h2 {
  font-size: 1em;
}

/* コンテナーが 700px より広い場合 */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

コンテナークエリーを使用することで、毎回カードが配置される場所を詳細に知ることなく、ページの複数の領域でカードを再利用することができます。カードがあるコンテナーが 700px より狭い場合、カードタイトルのフォントは小さくなり、カードが 700px より広いコンテナーにある場合、カードタイトルのフォントは大きくなります。

コンテナークエリーの構文の詳細については、 @container のページを参照してください。

前の節では、コンテナークエリーは、コンテナーコンテキストを持つ最も近い祖先に基づいてスタイル設定を適用しました。 container-name プロパティを使用して、コンテナーコンテキストに名前を付けることが可能です。一度名前をつけると、その名前を @container クエリーで使用することができ、特定のコンテナーを対象とすることができます。次の例では、 sidebar という名前のコンテナーコンテキストを作成しています：

css

.post {
  container-type: inline-size;
  container-name: sidebar;
}

そして、 @container アットルールを用いて、このコンテナーコンテキストを対象とすることができます。

css

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

コンテナーコンテキストの命名に関する詳細情報は、 container-name ページにあります。

コンテナーの一括指定構文

コンテナーを宣言するための一括指定は container プロパティを使用します。

css

.post {
  container: sidebar / inline-size;
}

このプロパティの詳細情報については、 container のリファレンスを参照してください。

コンテナークエリーの長さ単位

コンテナークエリーを使用してコンテナーにスタイルを設定する場合、コンテナークエリーの長さ単位を使用することができます。この単位は、クエリーするコンテナーの寸法に相対する長さを指定します。コンテナーに対する相対的な長さの単位を使用する成分は、具体的な長さの値を再計算する必要がなく、様々なコンテナーでより柔軟に使用することができます。

コンテナークエリーの長さの単位は以下の通りです。

cqw: クエリーコンテナーの幅の 1%
cqh: クエリーコンテナーの高さの 1%
cqi: クエリーコンテナーのインラインサイズの 1%
cqb: クエリーコンテナーのブロックサイズの 1%
cqmin: cqi または cqb の小さい方
cqmax: cqi または cqb の大きい方

次の例では、 cqi 単位を用いて、コンテナーのインラインサイズに基づいて見出しのフォントサイズを設定しています。

css

@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

これらの単位の詳細については、コンテナークエリーの長さの単位を参照してください。

コンテナークエリーの代替

コンテナークエリーにまだ対応していないブラウザーでは、 grid と flex を使用することで、このページで用いたカードコンポーネントに同様の効果を作成することができます。次の例では、 grid-template-columns 宣言を使用して、カード部品の 2 列のレイアウトを作成しています。

css

.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

ビューポートが小さい端末用に一列のレイアウトを使用したい場合は、メディアクエリーを使用してグリッドテンプレートを変更することができます。

css

@media (max-width: 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}

コンテナークエリーの使用

コンテナーコンテキストの命名

コンテナーの一括指定構文

コンテナークエリーの長さ単位

コンテナークエリーの代替

関連情報