コンテナクエリ

メディアクエリを使用すると、ビューポートのサイズや使用されているデバイスの種類に基づいてレイアウトを調整できます。コンテナ クエリを使用すると、要素の祖先（コンテナ）のサイズと状態に基づいて、要素をより具体的に調整できます。

サイトの複数のコンテキストで使用することを想定したニュースレター登録フォームがあるとします。登録ページではページの全幅に表示し、他のコンテンツがあるページでは分割された列に表示したい場合などです。

このデモで示されているように、コンテナ クエリを使用すると、ビューポートのサイズに関係なく、最も近いコンテナの属性に基づいて、要素のフォントサイズ、パディング、レイアウトなどのプロパティを調整できます。

コンテナクエリの設定

メディアクエリとは異なり、コンテナクエリは次の 2 つの部分で確立されます。

1. コンテナを定義します。
2. 親コンテナがクエリの条件に一致したときに適用される子要素のスタイルを記述します。

コンテナを定義する

コンテナは container-type プロパティを使用して定義できます。

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

inline-size の container-type を使用すると、コンテナのインライン軸をクエリできます。

inline 軸と block 軸の両方に対してクエリを実行するには、container-type: size を使用します。

main,
.my-component {
  container-type: size;
}

container-type の両方の値は、異なるタイプのサイズ コンテインメントを適用します。要素の Inline-size コンテインメントにより、その子孫が inline-size に影響を与えるのを防ぎます。

size コンテインメントを持つ要素は、ブロック軸とインライン軸の両方で、子孫がそのサイズに影響を与えるのを防ぎます。

この例では、サイズ コンテインメントが適用された要素に影響することがわかります。

コンテナは子（<p> 要素）のサイズに基づいてサイズ設定されないため、寸法（inline-size、block-size、aspect-ratio）を設定して明示的なサイズを指定するか、明示的なサイズのレイアウトに配置しない限り、折りたたまれます。

コンテナクエリの条件

コンテナが確立されたら、コンテナクエリ内のスタイルを適用するために true にする必要がある条件をかっこで囲んで追加できます。祖先要素のディメンションに基づくコンテナ サイズクエリの場合、条件は次の要素で構成されます。

• サイズ機能: width、height、inline-size、block-size、aspect-ratio、orientation。
• 比較演算子（>、<、=、>=）、
• 長さの値。

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

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

サイズ特徴条件は、コロンとテストする単一の値を使用して記述することもできます。

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

and や or などのキーワードを使用するか、演算子で複数の条件を連結して、複数の条件を組み合わせることもできます。

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

コンテナの命名

特定のコンテナをターゲットにするには、最も近い祖先でなくても、container-name プロパティを使用してコンテナに名前を付けることができます。次に、条件を定義する前に、クエリするコンテナ名を参照できます。

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

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

名前付きコンテナは、スタイル設定される要素の祖先である必要があります。

container プロパティでショートハンドを使用する

container プロパティを使用すると、コンテナを定義してコンテナタイプを指定する両方を簡潔な構文で行うことができます。

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

コンテナの名前はスラッシュの前に、コンテナのタイプはスラッシュの後に記述します。

コンテナクエリ ユニット

コンテナ内では、コンテナの相対長単位にもアクセスできます。これにより、コンテナのサイズに応じて相対的な長さが調整されるため、異なるコンテナに存在するコンポーネントの柔軟性が向上します。

ここでは、コンテナの長さの単位 cqi（クエリ コンテナのインライン サイズの 1%）がボタンのパディングに使用されています。

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

両方のボタンに同じ相対単位が適用されていますが、単位はコンテナのサイズに対する相対的なものであるため、2 番目のボタンはコンテナが大きいためパディングが多くなっています。

コンテナクエリのネスト

コンテナクエリはセレクタ内にネストできます。

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

または、他のコンテナ クエリや @ 規則の中にネストします。

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

理解度を確認する