Web Design Leaves

作成日：2024年4月9日

コンテナクエリとは

コンテナクエリとは、親要素や祖先要素に基づいてスタイルを定義できる CSS の新しい機能です。

以下は MDN の「コンテナーのサイズおよびスタイルクエリーの使用」からの抜粋です。

コンテナクエリにはコンテナサイズクエリとコンテナスタイルクエリの2種類があります。

• コンテナ サイズ クエリ

  コンテナ要素の現在のサイズに基づいて要素にスタイルを適用するコンテナクエリ

• コンテナ スタイル クエリ

  コンテナ要素のスタイル機能に基づいて要素にスタイルを適用するコンテナクエリ。※ 現時点ではブラウザのサポートは限定的です（以下では扱っていません）

例えば、以下の HTML がある場合、コンテナクエリを使って ul 要素のスタイルをその親要素の幅に応じて簡単に切り替えることができます。

<div class="list-wrapper">
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>PHP</li>
  </ul>
</div>

ul 要素の親要素の幅に応じてスタイルを適用させるので、.list-wrapper を基準となるコンテナ要素とします。それには .list-wrapper に container-type プロパティを設定します。

.list-wrapper の幅に応じてスタイルを適用するので container-type に inline-size を指定します。

/* 基準となるコンテナに container-type を設定（コンテナコンテキストを宣言） */
.list-wrapper {
  /* インライン方向のサイズ（幅）を対象とする */
  container-type: inline-size;
}

これにより、ブラウザは .list-wrapper がコンテナ要素であることと、その幅（inline-size）を対象としていることを認識してくれます。

そして、@container ルールでコンテナクエリを定義します。

以下ではサイズ特性 width と比較演算子を使って幅が 500px 以上というクエリとそれにマッチした場合に適用するスタイルを設定しています。

@container (width >= 500px) {
  ul {
    display: flex;
    gap: 10px;
    list-style-type: none;
    padding: 0;
  }
}

これで、.list-wrapper の幅が500px以上の場合、その子孫の ul 要素に上記のスタイルが適用されます。

以下は上記コードの動作確認サンプルです。

ブラウザの幅を変更して .list-wrappe の幅が変化すると、.list-wrapper の幅が500pxでリストのスタイルが切り替わります。

@container (width >= 500px) は @container (min-width: 500px)と同じことです（比較演算子）。

基本的な使い方

コンテナクエリの使い方をまとめると以下のようになります。

1. 基準となるコンテナ要素を決める

   基準となるコンテナ要素は、スタイルを適用する要素の親要素や祖先要素になります。

   基準となる適当な要素がない場合は作成します。

2. 基準となるコンテナ要素でコンテナコンテキストを宣言

   基準となるコンテナ要素に container-type プロパティで、対象とするサイズの種類を指定します。

   基準となるコンテナ要素の横幅（インライン方向のサイズ）に応じてスタイルを適用する場合は、container-type に inline-size を指定します。

   オプショナルで container-name プロパティを使って名前を付けることができます。

   また、container プロパティを使うと container-type と container-name を一括指定できます。

   container-type や container を設定することを「コンテナコンテキストを宣言する」と言います。また、それらが設定された要素は「コンテナコンテキストを持つ」などと言います。

3. @container ルールでコンテナクエリを定義

   @container ルールを使って条件と、条件にマッチした場合に適用するスタイルを設定します。

例えば、以下の HTML で .foo-wrapper のサイズに基づいて .foo やその子要素にスタイルを適用する場合、基準となるコンテナ要素は .foo-wrapper になります。

<div class="foo-wrapper">
  <div class="foo">
    <h3>foo</h3>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
  </div>
</div>

基準となるコンテナ要素に container-type プロパティを設定して、コンテナコンテキスト（その要素が基準となるコンテナであることとどのサイズを対象とするか）を宣言します。

/* 基準となるコンテナ要素に container-type を設定（コンテナコンテキストを宣言）  */
.foo-wrapper {
  /* インライン方向のサイズ（幅）を基準とする */
  container-type: inline-size;
}

これでブラウザは .foo-wrapper の幅（inline-size）の変更に反応するようになります。

例えば、.foo-wrapper の幅が 400px 以上の場合に .foo に背景色を設定するには以下のように @container を使ってコンテナクエリを記述します。

/* .foo-wrapper の幅が 400px 以上であれば .foo に背景色を設定 */
@container (width >= 400px) {
  .foo {
    background-color: #c7d4f9;
  }
}

デバッグ（確認）用に resize プロパティを追加

開発段階で、基準となるコンテナ要素をリサイズ可能にしておくとコンテナクエリの動作を確認するのに便利です。

要素をリサイズ可能にするには、resize プロパティにその方向（水平方向の場合は horizontal）と、overflow プロパティに visible 以外を指定します。

.foo-wrapper {
  container-type: inline-size;
  /* 水平方向のリサイズを許可（水平・垂直方向にリサイズ可能するには both を指定） */
  resize: horizontal;
  /* overflow に visible 以外を指定 */
  overflow: auto;
}

@container (width >= 400px) {
  .foo {
    background-color: #c7d4f9;
  }
}

以下は、上記のように.foo-wrapper に確認用の resize プロパティを追加して、初期値として幅 200px を設定したサンプルです。

※ resize プロパティは iPhone などではサポートされていません。

https://caniuse.com/css-resize

.foo-wrapper {
  container-type: inline-size;
}

@container (width >= 400px) {
  /* 基準となるコンテナ要素自身を指定しても機能しない（無効） */
  .foo-wrapper {
    background-color: red;
  }
}

.foo-wrapper {
  container-type: inline-size;
}

/* 基準となるコンテナ要素の擬似要素 */
.foo-wrapper::before {
  content: 'before';
}

@container (width >= 400px) {
  /* 基準となるコンテナ要素の擬似要素を指定することは可能（有効） */
  .foo-wrapper::before  {
    background-color: red;
  }
}

プロパティ

<div class="bar-wrapper">
  <div class="bar">
    <p>bar</p>
  </div>
</div>

.bar-wrapper {
  /* size を指定してインライン方向及びブロック方向のサイズを対象に */
  container-type: size;
  /* height を指定しないと表示されないので注意 */
  height: 100px;
  border: 1px solid #999;
  /* コンテナ要素をリサイズ可能に（確認用） */
  resize: both;
  overflow: auto;
}

.bar {
  background-color: tomato;
  color: #fff;
  /* 基準となるコンテナの高さの100% */
  height: 100cqh;
}

.bar p {
  margin-block-start: 0;
}

/* クエリのサイズ特性に orientation を指定 */
@container (orientation: portrait) {
  .bar  {
    background-color: forestgreen;
  }
}

.card-wrapper {
  container-type: inline-size;
  /* コンテナ（コンテキスト）に名前を指定 */
  container-name: card-wrapper-container;
}

/* 名前を指定してコンテナクエリを定義 */
@container card-wrapper-container (width >=420px) {
  .card {
    flex-direction: row;
  }
}

.card-wrapper {
  container-type: inline-size;
  container-name: card-wrapper-container;
}

.card-wrapper {
  container: card-wrapper-container / inline-size;
}

@container ルール

@container はコンテナに対して評価される特性（条件）を指定してスタイルを適用するルールです。

以下が構文です。

@container 条件 {
  CSS
}

/* container-name で設定したコンテナ名を指定する場合 */
@container コンテナ名 条件 {
  CSS
}

• 条件：コンテナのサイズが変更されたときに、コンテナに対して評価される特性の集合
• CSS：指定した条件が真であれば（マッチすれば）適用されるスタイル

@container (width > 400px) and (height > 400px) {
  /* 適用されるスタイル */
}

@container (width > 400px) or (height > 400px) {
  /* 適用されるスタイル */
}

@container not (width < 400px) {
  /* 適用されるスタイル */
}

@container (max-width: 400px) {
  /* 幅 400px 以下 */
}
@container (min-width: 401px) {
  /* 幅 401px 以上（ 400px より大きい） */
}

@container (width <= 400px) {
  /* 幅 400px 以下 */
}
@container (width > 400px) {
  /* 幅が 400px より大きい */
}

@container (300px < width <= 640px) {
  /* 幅 300px より大きく 640px 以下 */
}

/* 上記は以下とほぼ同じこと */
@container (min-width: 301px) and (max-width: 640px) {
  /* 幅 300px より大きく（301px 以上） 640px 以下 */
}