Web/CSS/text-decoration-color を更新 (#2018)

- 2021/06/29 時点の英語版に同期

1 files changed, 43 insertions, 50 deletions

diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html
index 7b0322e9d0..f41da12a5c 100644
--- a/files/ja/web/css/text-decoration-color/index.html
+++ b/files/ja/web/css/text-decoration-color/index.html
@@ -3,14 +3,18 @@ title: text-decoration-color
 slug: Web/CSS/text-decoration-color
 tags:
   - CSS
-  - CSS テキスト
-  - CSS テキスト装飾
-  - CSS プロパティ
-  - HTML スタイル
-  - HTML 色
+  - CSS Property
+  - CSS Text
+  - CSS Text Decoration
+  - HTML Colors
+  - HTML Styles
   - Reference
-  - text-decoration-color
-  - 色
+  - Styling HTML
+  - Styling text
+  - color
+  - colors
+  - 'recipe:css-property'
+browser-compat: css.properties.text-decoration-color
 translation_of: Web/CSS/text-decoration-color
 ---
 <div>{{ CSSRef }}</div>
@@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color
 
 <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div>
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
 
 <p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code&gt;text-decoration-color で) 線の色を指定することで実現できます。</p>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Syntax">構文</h2>
 
 <pre class="brush:css no-line-numbers">/* &lt;color&gt; 値 */
-text-decoration-color: currentColor;
+text-decoration-color: currentcolor;
 text-decoration-color: red;
 text-decoration-color: #00ff00;
 text-decoration-color: rgba(255, 128, 128, 0.5);
@@ -37,21 +40,40 @@ text-decoration-color: transparent;
 /* グローバル値 */
 text-decoration-color: inherit;
 text-decoration-color: initial;
+text-decoration-color: revert;
 text-decoration-color: unset;
 </pre>
 
-<h3 id="Values" name="Values">値</h3>
+<h3 id="Values">値</h3>
 
 <dl>
- <dt>{{cssxref("&lt;color&gt;")}}</dt>
- <dd>装飾線の色です。</dd>
+	<dt>{{cssxref("&lt;color&gt;")}}</dt>
+	<dd>装飾線の色です。</dd>
 </dl>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p>
+
+<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p>
+
+<ul>
+	<li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
+	<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
+	<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
+</ul>
+
+<h2 id="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h3 id="Formal_syntax">形式文法</h3>
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
+
+<h3 id="Basic_example">基本的な例</h3>
 
 <pre class="brush: html">&lt;p&gt;This paragraph has &lt;s&gt;some erroneous text&lt;/s&gt;
     inside it that I want to call attention to.&lt;/p&gt;</pre>
@@ -62,51 +84,22 @@ text-decoration-color: unset;
 }
 
 s {
-  text-decoration-line: <code>line-through</code>;
+  text-decoration-line: line-through;
   text-decoration-color: red;
   text-decoration-style: wavy;
 }</pre>
 
 <p>{{ EmbedLiveSample('Examples') }}</p>
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p>
-
-<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p>
-
-<ul>
- <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td>
-   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
-   <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td>
-  </tr>
- </tbody>
-</table>
+<h2 id="Specifications">仕様書</h2>
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
 
-<p>{{Compat("css.properties.text-decoration-color")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li>