CSS Reference

@container

コンテナクエリを使用する

@container 規則は、コンテナクエリ（Container Query）のための条件付きグループ規則です。

CSS におけるコンテナクエリ（Container Query）は、特定の要素のコンテナのサイズやスタイルに基づいて、その要素に適用されるスタイルを条件付きで変更するための機能です。従来のメディアクエリ（Media Query）は常にブラウザのビューポートサイズに基づいてスタイルを変更しますが、コンテナクエリは、ビューポートサイズに限定せず、要素を包含する親要素（コンテナ）のサイズやスタイルに基づいてスタイルを変更します。

@container 規則の基本的な構文は下記のようになります。

@container [ <container-name> ]? <container-condition> {
  <stylesheet>
}

<container-name>

オプションとして指定することで、<stylesheet> に記述されたスタイル宣言を、指定した名前と一致するコンテナに絞り込んで適用することができます。

例えば、下記のような HTML と、CSS がある場合、

<!-- HTML -->
<main>
  <div class="container">
    <div class="inner">Inner</div>
  </div>
  <div class="sibling">Sibling</div>
</main>

/* CSS */
@container (width <= 150px) {
  .inner {
    background-color: blue;
  }
}

特に <container-name> の指定がないので、自動的に最も近い祖先要素となる、.container がコンテナとして選択され、このコンテナのサイズが 150px 以下の場合は、.inner の背景色が適用されることになります。

ここで、下記のように .container 要素の親である main 要素に container-name プロパティで名前を付け、コンテナクエリ側でも <container-name> でその名前を指定します。

/* CSS */
main {
  container-name: main;
}

@container main (width <= 150px) {
  .inner {
    background-color: blue;
  }
}

すると、コンテナクエリは、main 要素のサイズを基準に、.inner に対するスタイルを適用することになります。

<container-condition>

コンテナに指定する条件文です。キーワードとして not、and、or が使用でき、複数の条件を組み合わせることが可能です。また、style() でスタイル条件を指定することもできます。

例えば、コンテナサイズによる条件分岐は下記のような記述になります。

@container (30em <= width <= 50em) {
  /* 横幅が 30em 以上、50em 未満の場合 */
}

@container (min-width: 400px) {
  /* 横幅が 400px 以上の場合 */
}

@container (width > 400px) and (height > 400px) {
  /* 幅が 400px より大きい、かつ、高さが 400px より大きい場合 */
}

@container (width > 400px) or (height > 400px) {
  /* 幅が 400px より大きい、もしくは、高さが 400px より大きい場合 */
}

@container not (width >= 768px) {
  /* not キーワードを使用して、横幅が 768px 以上の場合以外、つまり横幅が 768px よりも小さい場合 */
}

コンテナのサイズを取得するために下記の記述子が使用可能です。

width コンテナの幅（<length>）を取得します。
height コンテナの高さ（<length>）を取得します。
inline-size コンテナのインラインサイズ（<length>）を取得します。インラインサイズとは、書字方向に対して水平方向のサイズです。横書きの場合は幅、縦書きの場合は高さとなります。
block-size コンテナのブロックサイズ（<length>）を取得します。ブロックサイズとは、書字方向に対して垂直方向のサイズです。横書きの場合は高さ、縦書きの場合は幅となります。
aspect-ratio コンテナの縦横比（アスペクト比 / （<ratio>））を取得します。<ratio> 値は、コンテナの幅を高さで割ったもので、例えば 16/9 や 1.7777778 といった値になります。
orientation ビューポートの向きを取得します。portrait、landscape いずれかの値を組み合わせて指定し、orientation: portrait はスマートフォンなどでいう、縦表示（height の値が width の値以上である）の場合に一致します。横表示の場合は、orientation: landscape に一致します。

上記の記述子を使用して、インラインサイズで条件分岐をしたい場合は下記のように記述します。

@container (inline-size > 30em) {
  /* インラインサイズが 30em より大きい場合 */
}

orientation: を使用して、画面の向きを条件に加えることも可能です。

@container (orientation: portrait) and (inline-size > 30em) {
  /* 縦表示で、かつ、インラインサイズが 30em より大きい場合 */
}

また、コンテナクエリは入れ子にして記述することも可能です。

@container (orientation: landscape) {
  /* 画面が横表示の場合 */
  @container (inline-size > 400px) {
    /* 画面が横表示の場合、かつ、インラインサイズが 400px より大きい場合 */
  }
  @container (block-size > 600px) {
    /* 画面が横表示の場合、かつ、ブロックサイズが 600px より大きい場合 */
  }
}

style() でスタイル条件を指定

特定のスタイルによって条件分岐を行うこともできます。

@property --responsive {
  syntax: "true | false";
  inherits: false;
  initial-value: true;
}

.example-01 {
  --responsive: true;
}
.example-02 {
  --responsive: false;
}

@container style(--responsive: true) {
  /* --responsive カスタムプロパティに true の値を持つ場合 */
}

2024年8月20日現在、Firefox はコンテナスタイルクエリをサポートしていません。

コンテナクエリ内で使用可能な長さの単位

コンテナクエリ内では、コンテナのサイズを基にした下記の長さ単位を使用することができます。

cqw クエリコンテナの幅の 1%
cqh クエリコンテナの高さの 1%
cqi クエリコンテナのインラインサイズの 1%
cqb クエリコンテナのブロックサイズの 1%
cqmin cqi もしくは cqb のうち、小さい方
cqmax cqi もしくは cqb のうち、大きい方

例えば下記のような記述が可能です。

@container (inline-size >= 30em) {
  h2 {
    font-size: calc(1.2em + 1cqi);
  }
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome