Web/CSS/At-rule を更新

- 2021/08/13 時点の英語版に同期
- 外部からのフラグメントへのリンクも更新

7 files changed, 86 insertions, 79 deletions

diff --git a/files/ja/web/css/@charset/index.html b/files/ja/web/css/@charset/index.html
index 570f4bc9c0..2a57f026b1 100644
--- a/files/ja/web/css/@charset/index.html
+++ b/files/ja/web/css/@charset/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/@charset
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>@charset</code></strong> <a href="/ja/docs/CSS/At-rule" title="At-rule">at-規則</a> は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。<a href="/ja/docs/CSS/Syntax#nested_statements" title="CSS/Syntax#nested_statements">入れ子の文</a> でないとしても、<a href="/ja/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">条件付きグループ規則</a> では使えません。複数の <code>@charset</code> at-規則が定義されると、最初のものだけが使われます。HTML 要素の <code>style</code> 属性や、HTML ページの文字セットが関係している {{HTMLElement("style")}} 要素の中では使えません。</p>
+<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>@charset</code></strong> <a href="/ja/docs/CSS/At-rule" title="At-rule">at-規則</a> は、スタイルシートで使う文字エンコーディングを定義します。この規則はスタイルシートの最初の要素でなければならず、これより前には文字を一切記述してはいけません。<a href="/ja/docs/CSS/Syntax#nested_statements" title="CSS/Syntax#nested_statements">入れ子の文</a> でないとしても、<a href="/ja/docs/CSS/At-rule#条件付きグループルール">条件付きグループルール</a> では使えません。複数の <code>@charset</code> at-規則が定義されると、最初のものだけが使われます。HTML 要素の <code>style</code> 属性や、HTML ページの文字セットが関係している {{HTMLElement("style")}} 要素の中では使えません。</p>
 
 <pre class="brush: css no-line-numbers">@charset "utf-8";</pre>
 
diff --git a/files/ja/web/css/@font-face/index.html b/files/ja/web/css/@font-face/index.html
index 3c0d73221b..593910fd2e 100644
--- a/files/ja/web/css/@font-face/index.html
+++ b/files/ja/web/css/@font-face/index.html
@@ -19,7 +19,7 @@ translation_of: Web/CSS/@font-face
 
 <p><code>url()</code> と <code>local()</code> を両方とも使用することは一般的であり、そうすることでユーザーのインストールされたフォントのコピーが利用できればそれを利用し、ユーザーの端末に見つからない場合はフォントのコピーを代替としてダウンロードすることができます。</p>
 
-<p><code>@font-face</code> @-規則は、 CSS の最上位だけでなく、 <a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">CSS の条件付き @-規則グループ</a>の中でも使用することができます。</p>
+<p><code>@font-face</code> @-規則は、 CSS の最上位だけでなく、 <a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">CSS の条件付き @-規則グループ</a>の中でも使用することができます。</p>
 
 <pre class="brush: css no-line-numbers">@font-face {
   font-family: "Open Sans";
diff --git a/files/ja/web/css/@font-feature-values/index.html b/files/ja/web/css/@font-feature-values/index.html
index 392dfefed5..d84fd3303b 100644
--- a/files/ja/web/css/@font-feature-values/index.html
+++ b/files/ja/web/css/@font-feature-values/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/@font-feature-values
 
 <p><strong><code>@font-feature-values</code></strong> は <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の<a href="/ja/docs/Web/CSS/At-rule" title="At-rule">アット規則</a>で、OpenType で有効化された特性が異なるものに対して {{cssxref("font-variant-alternates")}} プロパティで共通の名前を使用することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。</p>
 
-<p><code>@font-feature-values</code> アット規則は、CSS の最上位で使用することも、任意の <a href="/ja/docs/Web/CSS/At-rule#Conditional_Group_Rules">CSS の条件付きグループアット規則</a>の内部で使用することもできます。</p>
+<p><code>@font-feature-values</code> アット規則は、CSS の最上位で使用することも、任意の <a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">CSS の条件付きグループアット規則</a>の内部で使用することもできます。</p>
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
diff --git a/files/ja/web/css/@import/index.html b/files/ja/web/css/@import/index.html
index 3fbaa9a92d..79081a08d0 100644
--- a/files/ja/web/css/@import/index.html
+++ b/files/ja/web/css/@import/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/@import
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@import</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは<a href="/ja/docs/Web/CSS/Syntax#nested_statements">入れ子になるステートメント</a>ではないので、 <code>@import</code> は<a href="/ja/docs/Web/CSS/At-rule#Conditional_Group_Rules">条件付き @-規則グループ</a>の中で使うことはできません。</p>
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>@import</code></strong> <a href="/ja/docs/Web/CSS/At-rule">@-規則</a> は、他のスタイルシートから {{CSSxRef("@charset")}} を除いたスタイル規則をインポートするために使用します。これは<a href="/ja/docs/Web/CSS/Syntax#nested_statements">入れ子になるステートメント</a>ではないので、 <code>@import</code> は<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付き @-規則グループ</a>の中で使うことはできません。</p>
 
 <pre class="brush: css no-line-numbers">@import url("fineprint.css") print;
 @import url("bluish.css") speech;
diff --git a/files/ja/web/css/@media/index.html b/files/ja/web/css/@media/index.html
index 222098da50..b335cc8467 100644
--- a/files/ja/web/css/@media/index.html
+++ b/files/ja/web/css/@media/index.html
@@ -19,7 +19,7 @@ translation_of: Web/CSS/@media
 
 <h2 id="Syntax" name="Syntax">構文</h2>
 
-<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p>
+<p><code>@media</code> @-規則は、コードの最上位に配置したり、他の<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付きグループ @-規則</a>の中に入れ子にして配置したりすることができます。</p>
 
 <pre class="brush: css no-line-numbers">/* コードの最上位 */
 @media screen and (min-width: 900px) {
diff --git a/files/ja/web/css/@supports/index.html b/files/ja/web/css/@supports/index.html
index 34320c8394..f664508ed1 100644
--- a/files/ja/web/css/@supports/index.html
+++ b/files/ja/web/css/@supports/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/@supports
 ---
 <div>{{CSSRef}}</div>
 
-<p><strong><code>@supports</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは<em>機能クエリ</em>と呼ばれます。規則はコードの最上位または他の<a href="/ja/docs/Web/CSS/At-rule#Conditional_group_rules">条件付きグループアット規則</a>の中に配置することができます。</p>
+<p><strong><code>@supports</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/At-rule">アット規則</a>で、宣言をブラウザーが1つまたは複数の特定の CSS 機能に対応しているかによって、宣言を指定することができます。これは<em>機能クエリ</em>と呼ばれます。規則はコードの最上位または他の<a href="/ja/docs/Web/CSS/At-rule#条件付きグループルール">条件付きグループアット規則</a>の中に配置することができます。</p>
 
 <pre class="brush: css; no-line-numbers notranslate">@supports (display: grid) {
   div {
diff --git a/files/ja/web/css/at-rule/index.md b/files/ja/web/css/at-rule/index.md
index 6d4fdbcd1d..42e4568a4b 100644
--- a/files/ja/web/css/at-rule/index.md
+++ b/files/ja/web/css/at-rule/index.md
@@ -1,85 +1,92 @@
 ---
-title: '@-規則'
+title: アットルール
 slug: Web/CSS/At-rule
 tags:
-  - '@-規則'
-  - '@規則'
   - CSS
-  - CSS リファレンス
+  - ガイド
   - Reference
-  - アット規則
 translation_of: Web/CSS/At-rule
 ---
-<div>{{cssref}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><strong>@-規則</strong> は <a href="/ja/docs/Web/CSS/Syntax#CSS_statements">CSS 文</a> の一つで、 CSS の振舞いを規定します。 @-規則は、アットマーク、 '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>) で始まり、それに続く識別子から、次のセミコロン、 ';' (<code>U+003B SEMICOLON</code>) もしくは次の <a href="/ja/docs/Web/CSS/Syntax#CSS_declarations_blocks">CSS ブロック</a>のどちらかが現れるまでの部分からなります。</span></p>
+**アットルール**は [CSS 文](/ja/docs/Web/CSS/Syntax#css_statements)のうち、CSS の動作を既定するものです。アットルールはアットマーク、'`@`' (`U+0040 COMMERCIAL AT`) で始まり、それに続く識別子から、次のセミコロン、 '`;`' (`U+003B SEMICOLON`) もしくは次の [CSS ブロック](/ja/docs/Web/CSS/Syntax#css_declarations_blocks)のどちらかが現れるまでの部分からなります。
 
-<pre class="brush: css notranslate">/* 一般的な構造 */
+## 構文
+
+### 通常
+
+```css
+/* 一般的な構造 */
 @IDENTIFIER (RULE);
 
 /* 例: ブラウザーに UTF-8 文字セットを使用することを知らせる */
-@charset "utf-8";</pre>
-
-<p>@-規則は何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます:</p>
-
-<ul>
- <li>{{cssxref("@charset")}} — スタイルシートで使用される文字セットを定義します。</li>
- <li>{{cssxref("@import")}} — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。</li>
- <li>{{cssxref("@namespace")}} — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。</li>
- <li><strong><em>入れ子状の @-規則</em></strong> — 入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループ規則の内部で使用されます:
-  <ul>
-   <li>{{cssxref("@media")}} — <em>メディアクエリ</em>の条件を満たすデバイスで読み込まれた場合にこれの中身が適用される、条件付きグループ規則です。</li>
-   <li>{{cssxref("@supports")}} — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループ規則です。</li>
-   <li>{{cssxref("@document")}} {{experimental_inline}} — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループ規則です。<em>(CSS Level 4 仕様に先送り)</em></li>
-   <li>{{cssxref("@page")}} — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。</li>
-   <li>{{cssxref("@font-face")}} — ダウンロードすべき外部フォントに関する指定を記述します。</li>
-   <li>{{cssxref("@keyframes")}} — CSS アニメーションシーケンスの中間ステップに関する指定を記述します。</li>
-   <li>{{cssxref("@viewport")}} {{experimental_inline}} — 小さな画面のデバイス用に、ビューポートに関する指定を記述します。<em>(現在は Working Draft 段階)</em></li>
-   <li>{{cssxref("@counter-style")}} — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。<em>(勧告候補段階ですが、現時点で Gecko しか実装していません)</em></li>
-   <li>{{cssxref("@font-feature-values")}} (および <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code>, <code>@character-variant</code>)<br>
-    — OpenType の各機能を有効化するために、 {{cssxref("font-variant-alternates")}} の一般名を定義します。<em>(勧告候補段階ですが、現時点で Gecko しか実装していません)</em></li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Conditional_group_rules" name="Conditional_group_rules">条件付きグループ規則</h2>
-
-<p>プロパティの値のように、各 @-規則は異なる構文を持ちます。しかし、いくつかの @-規則は <strong>条件付きグループ規則</strong>という特別なカテゴリに分類されます。条件付きグループ規則の文は、構文が共通していて、どれも入れ子の文を持つことができ、ここには普通のルールセットはもちろん、さらに入れ子の @-規則を含める事ができます。さらに言えば、それらはすべて共通の意味あいがあります。 — 全ては常に<strong>真</strong>か<strong>偽</strong>と判定される何らかの条件と結びついています。条件が<strong>真</strong>であれば、条件付きグループ規則内の文全部が適用されます。</p>
-
-<p>条件付きグループ規則は <a href="http://dev.w3.org/csswg/css3-conditional/">CSS Conditionals Level 3</a> で定義されており、以下の規則があります。</p>
-
-<ul>
- <li>{{cssxref("@media")}}</li>
- <li>{{cssxref("@supports")}}</li>
- <li>{{cssxref("@document")}} <em>(CSS Level 4 仕様に先送り)</em></li>
-</ul>
-
-<p>条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Conditional')}}</td>
-   <td>{{Spec2('CSS3 Conditional')}}</td>
-   <td>初回定義</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td><code>@-webkit-keyframes</code> を標準化</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSS_key_concepts}}</li>
-</ul>
+@charset "utf-8";
+```
+
+アットルールは何種類かあり、識別子で区別され、それぞれに異なる構文が使用されます。
+
+- {{cssxref("@charset")}} — スタイルシートで使用される文字セットを定義します。
+- {{cssxref("@import")}} — 外部のスタイルシートを読み込むよう CSS エンジンに指示します。
+- {{cssxref("@namespace")}} — CSS エンジンに、内容のすべてに XML 名前空間の接頭辞がついていると見なすよう指示します。
+
+### 入れ子
+
+```css
+@IDENTIFIER (RULE) {
+
+}
+```
+
+入れ子になった文のサブセットになります。スタイルシートの文としてだけではなく、条件付きグループルールの内部で使用されます。
+
+- {{cssxref("@media")}} — *メディアクエリ*の条件を満たす端末で読み込まれた場合にこれの中身が適用される、条件付きグループルールです。
+- {{cssxref("@supports")}} — ブラウザーが指定の条件を満たす場合にこれの中身が適用される、条件付きグループルールです。
+- {{cssxref("@document")}} {{deprecated_inline}} — このスタイルシートが適用される文書が、与えられた条件を満たす場合に、これの中身が適用される条件付きグループルールです。 _(CSS Level 4 仕様に先送り)_
+- {{cssxref("@page")}} — 文書印刷の際に適用されるレイアウト変更に関する指定を記述します。
+- {{cssxref("@font-face")}} — ダウンロードすべき外部フォントに関する指定を記述します。
+- {{cssxref("@keyframes")}} — CSS アニメーションシーケンスの中間段階に関する指定を記述します。
+- {{cssxref("@viewport")}} {{deprecated_inline}} — 小さな画面の端末用に、ビューポートに関する指定を記述します。 _(現在は草稿段階)_
+- {{cssxref("@counter-style")}} — 定義済みのスタイルにはない、独自のカウンタースタイルを定義します。_(勧告候補段階ですが、現時点で Gecko しか実装していません)_
+- {{cssxref("@font-feature-values")}} (および `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset`, `@character-variant`) — OpenType の各機能を有効化するために、 {{cssxref("font-variant-alternates")}} の一般名を定義します。_(勧告候補段階ですが、現時点で Gecko しか実装していません)_
+- {{cssxref("@property")}} {{experimental_inline}} — カスタムプロパティと変数に関して指定します。 _(現在は草稿段階)_
+- {{cssxref("@color-profile")}} {{experimental_inline}} — {{cssxref("color_value/color()", "color()")}} 関数で使用するカラープロファイルを定義できます。
+
+## 条件付きグループルール
+
+プロパティの値と同様に、アットルールはそれぞれ異なる構文を持っています。しかし、いくつかのアットルールは **条件付きグループルール**という特別なカテゴリーに分類されます。これらの文は構文が共通しており、どれも*内側の文*—*規則セット*または*内側のアットルール*を入れることができます。さらに言えば、それらはすべて共通の意味合いがあります。 — すべては常に**真**か**偽**かで判定される何らかの条件と結びついています。条件が**真**であれば、条件付きグループルール内の文全部が適用されます。
+
+条件付きグループルールは  [CSS Conditionals Level 3](https://dev.w3.org/csswg/css3-conditional/) で定義されており、以下の規則があります。
+
+- {{cssxref("@media")}}
+- {{cssxref("@supports")}}
+- {{cssxref("@document")}} _(CSS Level 4 仕様に先送り)_
+
+条件付きグループは、入れ子状の文を持ち、いくつでも入れ子にすることができます。
+
+## 索引
+
+- {{cssxref("@charset")}}
+- {{cssxref("@color-profile")}} {{experimental_inline}}
+- {{cssxref("@counter-style")}}
+- {{cssxref("@document")}} {{deprecated_inline}}
+- {{cssxref("@font-face")}}
+- {{cssxref("@font-feature-values")}}
+- {{cssxref("@import")}}
+- {{cssxref("@keyframes")}}
+- {{cssxref("@media")}}
+- {{cssxref("@namespace")}}
+- {{cssxref("@page")}}
+- {{cssxref("@property")}} {{experimental_inline}}
+- {{cssxref("@supports")}}
+- {{cssxref("@viewport")}} {{deprecated_inline}}
+
+## 仕様書
+
+| 仕様書                                                  | 状態                          | 備考                          |
+| ------------------------------------------------------- | ----------------------------- | ----------------------------- |
+| {{SpecName('CSS3 Conditional')}}                        | {{Spec2('CSS3 Conditional')}} | 初回定義                      |
+| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}}           | `@-webkit-keyframes` を標準化 |
+
+## 関連情報
+
+- {{CSS_key_concepts}}