コンテナクエリについてまとめ

コンテナクエリとは

要素のサイズやレイアウトに基づいてスタイルを適用するためのCSSの機能です。これは、従来のメディアクエリがビューポート（画面全体のサイズ）に基づいてスタイルを変更するのに対し、特定のコンテナ要素のサイズを基準にスタイルを変更できる点で異なります。
子要素が親コンテナのサイズに応じてスタイルを変更できるため、柔軟な指定が可能になりますね。

コンテナクエリの使い方

コンテナクエリを使うポイントは、「どの要素をコンテナとして設定するか」を決めることです。
今回は、.container 要素をコンテナに指定します。
コンテナにする要素は必ずしも親要素である必要はありません。レスポンシブ対応を行いたい要素の祖先要素であれば問題ありません。

要素をコンテナに設定するには、container-type プロパティを使用します。
このプロパティを設定することで、その要素が「コンテナコンテキスト」（container context または containment context）と呼ばれる状態になります。

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

次に、container-type プロパティで、コンテナの基準方向を指定します。
次のような値を指定できます。

• inline-size: インライン方向に基づく（横幅が基準）。
• size: インライン方向とブロック方向の両方が基準。
  ※現時点ではブロック方向のみの指定はできません。

ここまででコンテナが決まったので、そのコンテナを基準にどのようなスタイルをあてるかを書きます。

@container (min-width: 350px) {
  .child {
    background-color: #0bd;
  }
}

例だと「コンテナの横幅が350px以上になったら」という条件でスタイルが適用されます。

---

以下に例を作成してみました。リサイズすると文字色が変更されると思います。

---

container-name プロパティについて

container-name は、CSSコンテナクエリでスタイルを適用する際に、特定のコンテナを識別するために使用する名前を設定するプロパティです。
これにより、複数のコンテナが存在する場合でも、特定のコンテナに基づいたクエリを記述できます。

使用例

コンテナとなる要素に container-name を指定します。
もしくは container プロパティでまとめて記述することもできます。その場合はコンテナ名 / コンテナタイプの形式で記述します。

.container {
  container-name: site-header; 
  /* または */
  container: site-header / inline-size;
}

container-nameを指定したら、@containerで指定した名前を設定しスタイルを記述します。

@container site-header (min-width: 600px) { 
  .navigation { 
    display: flex; 
  } 
}