`container-name` プロパティ

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年2月以降、すべてのブラウザーで利用可能です。

完全な互換性情報を見る
もっと詳しく

container-name は CSS のプロパティで、 @container アットルールによるコンテナークエリーで使用されるクエリーコンテナー名のリストを指定します。

構文

css

container-name: none;

/* 単一の名前 */
container-name: my-layout;

/* 複数の名前 */
container-name: my-page-layout my-component-library;

/* グローバル値 */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

値

このプロパティは、<custom-ident> の値の空白区切りリスト、またはキーワード none として指定します。

none

デフォルト値。クエリコンテナーには名前がありません。

<custom-ident>

コンテナーを識別するために使用する、大文字と小文字を区別する文字列です。以下の条件が適用されます。

名前は有効な <custom-ident> であれば何でもかまいませんが、default と等しくあってはいけません。
名前の値は引用符で囲んではいけません。
制作者が定義する識別子（例: --container-name）を意図するダッシュ記号は許可されています。
空白で区切られた複数の名前のリストが許可されます。

公式定義

初期値	`none`
適用対象	すべての要素
継承	なし
計算値	`none` または識別子の順序付きリスト
アニメーションの種類	アニメーション不可

形式文法

container-name = 
  none             |
  <custom-ident>+

解説

名前が指定されていない場合は、コンテナークエリーは、直近のコンテナーコンテキストのある祖先のサイズやスクロール状態などの属性に基づいて、要素にスタイルを適用します。

メモ: コンテナーの子要素のサイズ設定には、コンテナークエリーの長さ単位を使用できます。

コンテナーコンテキストに名前が指定されている場合、@container アットルールにその名前を設定することで、そのコンテナーコンテキストを具体的に指定することができます。

要素に container-name を割り当てることでクエリーコンテナーを生成し、関連付けられた @container アットルールではクエリー式を指定せずに、その名前の存在のみを照会することができます。これら、いわゆる名前のみのコンテナークエリーを使用すると、特定の container-name が設定された祖先要素を持つかどうかのみに基づいて、要素にスタイルを選択的に適用することができます。

例

コンテナー名の使用

タイトルとテキストを持つカード部品である、次の HTML の例があったとします。

html

<div class="card">
  <div class="post-meta">
    <h2>カードのタイトル</h2>
    <p>投稿の詳細</p>
  </div>
  <div class="post-excerpt">
    <p>
      ネコに関する<a href="https://example.com">ブログ投稿</a>のプレビュー。
    </p>
  </div>
</div>

格納コンテキストを作成するには、 CSS で要素に container-type プロパティを追加します。次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。

メモ: これらの宣言のための一括指定構文は container ページで説明されています。

css

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

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

コンテナークエリーを @container アットルールで記述すると、クエリーが真と評価されたときにコンテナーの要素にスタイルが適用されます。次の例では、 .post-excerpt 要素のコンテンツのみに適用するコンテナークエリーと、 .post-meta と .post-excerpt のコンテンツ両方に適用するコンテナークエリーの 2 つがあります。

css

@container excerpt (width >= 400px) {
  p {
    visibility: hidden;
  }
}

@container (width >= 400px) {
  p {
    font-size: 2rem;
  }
}

コンテナークエリーの書き方については、CSS コンテナークエリーのページを参照してください。

複数のコンテナー名の使用

コンテナーコンテキストには、空白で区切った複数の名前を指定することもできます。

css

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

これにより、 @container アットルールでどちらかの名前を使用してコンテナーをターゲットすることができます。これは、複数のコンテナークエリーで同じコンテナーを対象としたい場合に有益です。

css

@container meta (width <= 500px) {
  p {
    visibility: hidden;
  }
}

@container card (width <= 200px) {
  h2 {
    font-size: 1.5em;
  }
}

名前のみのコンテナークエリーの使用

この例では、名前のみのコンテナークエリーの使用方法を示しています。

HTML

<div> 要素の id を container 西、3 つの <p> 要素を、2 つはコンテナー内に、1 つはコンテナーの外に配置します。

html

<div id="container">
  <p>これはコンテナー内です。</p>
  <p>これもコンテナー内です。</p>
</div>
<p>これはコンテナー内ではありません。</p>

CSS

コンテナーに名前を割り当てます。

css

#container {
  container-name: my-container;
}

こうすることで、次のスニペットに示すように、その名前が設定されたコンテナーの中に存在する要素にのみ、スタイルを選択的に適用することができます。

css

@container my-container {
  p {
    background-color: lime;
    font-size: 1.3rem;
    width: 50vw;
    padding: 0.5rem;
    font-family: sans-serif;
  }
}