From 7a35d368ddeafe5c320e093f6de83ec458fc3b97 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 17 Aug 2024 19:40:22 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@container/index.md | 82 ++++++++++++++++++++++------ 1 file changed, 64 insertions(+), 18 deletions(-) diff --git a/files/ja/web/css/@container/index.md b/files/ja/web/css/@container/index.md index 8df36c7d5b7a59..acbbff45f7daea 100644 --- a/files/ja/web/css/@container/index.md +++ b/files/ja/web/css/@container/index.md @@ -2,17 +2,18 @@ title: "@container" slug: Web/CSS/@container l10n: - sourceCommit: 3d4edafe934c84878d2a46d8c22911ba351b7261 + sourceCommit: 4cb569f768ec9529724f8fb06539f2903a583a41 --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -**`@container`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、[格納コンテキスト](/ja/docs/Web/CSS/CSS_container_queries#格納コンテキストの命名) にスタイルを適用する条件付きグループルールです。 +**`@container`** は [CSS](/ja/docs/Web/CSS) の[アットルール](/ja/docs/Web/CSS/At-rule)で、[コンテナーコンテキスト](/ja/docs/Web/CSS/CSS_containment/Container_queries#コンテナーコンテキストの命名)にスタイルを適用する条件付きグループルールです。 スタイル宣言は条件によってフィルタリングされ、条件が真の場合にコンテナーに適用されます。 -この条件は、コンテナーのサイズが変わったときに評価されます。 +この条件は、コンテナーのサイズまたは [``](#container_style_queries) の値が変更されたときに評価されます。 + +{{cssxref("container-name")}} プロパティは、クエリーコンテナーの名前の一覧を指定します。これらの名前は、対象となるクエリーコンテナーをフィルターするために、`@container` ルールで使用することができます。オプションで、大文字と小文字を区別する `` は、クエリーによって対象となるクエリーコンテナーをフィルタリングします。 -オプションで大文字小文字を区別する {{cssxref("container-name")}} を指定することができ、これによって考慮するクエリーコンテナーの集合を、クエリーコンテナー名が一致するものだけにフィルタリングすることができます。 -要素に対して適格なクエリーコンテナが選択されると、`` の各コンテナー機能はそのクエリーコンテナーに対して評価されます。 +要素に対して適格なクエリーコンテナーが選択されると、`` の各コンテナー機能はそのクエリーコンテナーに対して評価されます。 ## 構文 @@ -32,13 +33,25 @@ l10n: font-size: 1.5em; } } +/* オプションの 付き */ +@container tall (height > 30rem) { + h2 { + line-height: 1.6; + } +} ``` ### 値 - `` - - : コンテナーのサイズが変更されたときに、コンテナーに対して評価される特性の集合です。 - `` で定義したスタイルは、この条件が真であれば適用されます。 + + - : オプションの `` および ``。条件が真の場合、この `` で定義されたスタイルが適用されます。 + + - `` + - : オプション。クエリーが真と評価された際にスタイルが適用されるコンテナーの名前を、{{cssxref("ident")}} として指定します。 + - `` + - : コンテナーのサイズが変更された際に、クエリーコンテナーに対して評価される一連の特性を指定します。 + - `` - : 一連の CSS 宣言です。 @@ -64,9 +77,9 @@ l10n: } ``` -### 名前付き格納コンテキスト +### 名前付きコンテナーコンテキスト -格納コンテキストには、 {{cssxref("container-name")}} プロパティを使用して名前を付けることができます。 +コンテナーコンテキストには、 {{cssxref("container-name")}} プロパティを使用して名前を付けることができます。 ```css .post { @@ -83,7 +96,7 @@ l10n: } ``` -コンテナクエリーでは、 {{cssxref("container-name")}} プロパティを使用して、クエリーコンテナー名と一致するコンテナー集合にフィルタリングします。 +コンテナークエリーでは、 {{cssxref("container-name")}} プロパティを使用して、クエリーコンテナー名と一致するコンテナー集合にフィルタリングします。 ```css @container sidebar (width > 400px) { @@ -141,11 +154,11 @@ l10n: ```js hidden const post = document.querySelector(".post"); const span = document.createElement("span"); -span.innerHTML = ".post width: " + post.clientWidth + "px"; +span.textContent = ".post width: " + post.clientWidth + "px"; post.parentNode.insertBefore(span, post.nextSibling); // リサイズ時に更新 window.addEventListener("resize", () => { - span.innerHTML = ".post width: " + post.clientWidth + "px"; + span.textContent = ".post width: " + post.clientWidth + "px"; }); ``` @@ -217,7 +230,7 @@ span { ### 入れ子のコンテナークエリー -単一のコンテナクエリーで複数のコンテナーを対象とすることはできません。 +単一のコンテナークエリーで複数のコンテナーを対象とすることはできません。 同じ効果を持つコンテナークエリーを入れ子にすることは可能です。 以下は、 `summary` という名前のコンテナーが `400px` よりも幅が広く、かつ祖先に `800px` よりも幅の広いコンテナーがある場合に、宣言されたスタイルを適用するクエリーです。 @@ -230,10 +243,37 @@ span { } ``` -### スタイルのコンテナークエリー +### コンテナースタイルクエリー + +{{CSSRef}}{{SeeCompatTable}} + +コンテナークエリーは、対象のコンテナー要素のスタイルを計算して評価することもできます。コンテナースタイルクエリーは、1 つ以上の `style()` 関数記法を使用する `@container` クエリーです。 論理値の構文と、スタイル機能をスタイルクエリーに結合するロジックは、[CSS 機能クエリー](/ja/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries) と同じです。 + +```css +@container style(), + not style(), + style() and style(), + style() or style() { + /* */ +} +``` + +それぞれの `style()` の引数は、単一の `` です。 **``** は、有効な CSS [宣言](/ja/docs/Web/CSS/Syntax#css_declarations)、CSS プロパティ、[``](/ja/docs/Web/CSS/var#values) のいずれかです。 -コンテナクエリーでは、コンテナー要素の計算されたスタイルを評価することもできます。 -以下のコンテナークエリーは、コンテナー要素の `--accent-color` の {{cssxref("computed_value", "計算値")}} が `blue` かどうかを調べます。 +```css +@container style(--themeBackground), + not style(background-color: red), + style(color: green) and style(background-color: transparent), + style(--themeColor: blue) or style(--themeColor: purple) { + /* */ +} +``` + +値のないスタイル特性は、指定されたプロパティの初期値と計算された値が異なる場合、真と評価されます。 + +`style()` 関数の引数として渡した `` が宣言である場合、スタイルクエリーは、宣言の値がクエリー対象のコンテナのそのプロパティの計算値と同じであれば真と評価されます。 そうでない場合は、偽と評価されます。 + +以下のコンテナークエリーは、コンテナー要素の `--accent-color` の{{cssxref("computed_value", "計算値")}}が `blue` かどうかを調べます。 ```css @container style(--accent-color: blue) { @@ -244,6 +284,10 @@ span { > [!NOTE] > カスタムプロパティが `blue` という値を持つ場合、そのプロパティが {{cssxref("@property")}} で色として定義されていない限り、同等の 16 進コード `#0000ff` は一致しません。 +個別指定プロパティを照会するスタイルの特性クエリは、計算された値が各プロパティで一致する場合は真となり、一致しない場合は偽となります。例えば、`@container style(border: 2px solid red)` は、その短縮形を構成する 12 個の個別指定プロパティ（`border-bottom-style` など）がすべて真であれば真になります。 + +グローバルな `revert` と `revert-layer` は `` の値としては不正なため、コンテナースタイルクエリーは偽になります。 + ## 仕様書 {{Specifications}} @@ -254,8 +298,10 @@ span { ## 関連情報 -- [コンテナークエリー](/ja/docs/Web/CSS/CSS_container_queries) +- [コンテナークエリーの使用](/ja/docs/Web/CSS/CSS_containment/Container_queries) +- [コンテナーのサイズおよびスタイルクエリーの使用](/ja/docs/Web/CSS/CSS_containment/Container_size_and_style_queries) - {{Cssxref("container-name")}} - {{Cssxref("container-type")}} - {{Cssxref("contain")}} - {{Cssxref("content-visibility")}} +- [CSS 拘束モジュール](/ja/docs/Web/CSS/CSS_containment)