container-name
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年2月.
container-name は CSS のプロパティで、 @container アットルールによるコンテナークエリーで使用されるクエリーコンテナー名のリストを指定します。 コンテナークエリーは、コンテナーコンテキストを持つ最も近い祖先のサイズまたはスクロール状態に基づいて、要素にスタイルを適用します。 コンテナーコンテキストの名前が指定されたとき、コンテナーコンテキストのある最も近い祖先の代わりに、 @container アットルールを用いて固有のターゲットを指定することができます。
メモ: container-type プロパティと container-name プロパティを使用すると、自動的に style 値と layout 値が contain プロパティに適用されます。
構文
container-name: none; /* 単一の名前 */ container-name: myLayout; /* 複数の名前 */ container-name: myPageLayout myComponentLibrary; /* グローバル値 */ container-name: inherit; container-name: initial; container-name: revert; container-name: revert-layer; container-name: unset; 値
none-
既定値。クエリコンテナーには名前がありません。
<custom-ident>-
コンテナーを識別するために使用する、大文字と小文字を区別する文字列です。 以下の条件が適用されます。
- 名前は有効な
<custom-ident>であれば何でもかまいませんが、defaultと等しくあってはいけません。 - 名前の値は引用符で囲んではいけません。
- 制作者が定義する識別子（例:
--container-name）を意図するダッシュ記号は許可されています。 - スペースで区切られた複数の名前のリストが許可されます。
- 名前は有効な
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | none または識別子の順序付きリスト |
| アニメーションの種類 | アニメーション不可 |
形式文法
container-name =
none |
<custom-ident>+
例
コンテナー名の使用
タイトルとテキストを持つカード部品である、次の HTML の例があったとします。
<div class="card"> <div class="post-meta"> <h2>カードのタイトル</h2> <p>My post details.</p> </div> <div class="post-excerpt"> <p> A preview of my <a href="https://example.com">blog post</a> about cats. </p> </div> </div> 格納コンテキストを作成するには、 CSS で要素に container-type プロパティを追加します。 次の例では、カードのメタ情報用と投稿の抜粋用の 2 つのコンテナーを作成しています。
メモ: これらの宣言のための一括指定構文は container ページで説明されています。
.post-meta { container-type: inline-size; } .post-excerpt { container-type: inline-size; container-name: excerpt; } コンテナークエリーを @container アットルールで記述すると、クエリーが真と評価されたときにコンテナーの要素にスタイルが適用されます。 次の例では、 .post-excerpt 要素のコンテンツのみに適用するコンテナークエリーと、 .post-meta と .post-excerpt のコンテンツ両方に適用するコンテナークエリーの 2 つがあります。
@container excerpt (min-width: 400px) { p { visibility: hidden; } } @container (min-width: 400px) { p { font-size: 2rem; } } コンテナークエリーの書き方については、CSS コンテナークエリーのページを参照してください。
複数のコンテナー名の使用
コンテナーコンテキストには、空白で区切った複数の名前を指定することもできます。
.post-meta { container-type: inline-size; container-name: meta card; } これにより、 @container アットルールでどちらかの名前を使用してコンテナーをターゲットすることができます。 これは、複数のコンテナークエリーで同じコンテナーを対象としたい場合に有益です。
@container meta (max-width: 500px) { p { visibility: hidden; } } @container card (max-height: 200px) { h2 { font-size: 1.5em; } } 仕様書
| Specification |
|---|
| CSS Conditional Rules Module Level 5 # container-name |
ブラウザーの互換性
Loading…
関連情報
- CSS コンテナークエリー
- コンテナーのサイズおよびスタイルクエリーの使用
- コンテナーのスクロール状態クエリーの使用
@containerアットルール- CSS
container一括指定プロパティ - CSS
container-typeプロパティ - CSS
content-visibilityプロパティ