Web/CSS/At-rule を更新

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

1 files changed, 80 insertions, 73 deletions

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}}