container
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 は CSS の一括指定プロパティで、この要素をクエリーコンテナーとして確立し、コンテナークエリーで使用されるコンテナーコンテキストの名前を指定します。
構成要素のプロパティ
このプロパティは、以下の CSS プロパティの一括指定です。
構文
css
/* <container-name> */
container: my-layout;
/* <container-name> / <container-type> */
container: my-layout / size;
/* グローバル値 */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;
値
<container-name>-
コンテナーコンテキストの大文字小文字を区別した名前です。 構文の詳細は、
container-nameプロパティのページにあります。 <container-type>-
コンテナーコンテキストの種類です。 構文の詳細は、
container-typeプロパティのページにあります。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして
|
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
container =
<'container-name'> [ / <'container-type'> ]?
<container-name> =
none |
<custom-ident>+
<container-type> =
normal |
[ [ size | inline-size ] || scroll-state ]
例
インラインサイズ抑制の確立
以下の HTML の例があったとします。これは画像、タイトル、いくつかのテキストによるカード部品です。
html
<div class="post">
<div class="card">
<h2>カードのタイトル</h2>
<p>カードのコンテンツ</p>
</div>
</div>
コンテナーコンテキストを作成する明示的な方法は、 container-name をオプションとして container-type を宣言することです。
css
.post {
container-type: inline-size;
container-name: sidebar;
}
container の一括指定は、これを単一の宣言で定義しやすくするためのものです。
css
.post {
container: sidebar / inline-size;
}
そして、 @container アットルールを用いて、そのコンテナーの名前をターゲットにすることができます。
css
@container sidebar (min-width: 400px) {
/* <stylesheet> */
}
仕様書
| Specification |
|---|
| CSS Conditional Rules Module Level 5 # container-shorthand |
ブラウザーの互換性
Loading…
関連情報
- CSS コンテナークエリー
- コンテナーのサイズおよびスタイルクエリーの使用
@containerアットルール- CSS
contain一括指定プロパティ - CSS
container-typeプロパティ - CSS
container-nameプロパティ - CSS
content-visibilityプロパティ