CSS テキスト装飾の各プロパティの文書を更新

- 2021/10/04 時点の英語版に同期

1 files changed, 60 insertions, 64 deletions

diff --git a/files/ja/web/css/text-decoration-style/index.md b/files/ja/web/css/text-decoration-style/index.md
index 76e20dd2f2..c57688cb8f 100644
--- a/files/ja/web/css/text-decoration-style/index.md
+++ b/files/ja/web/css/text-decoration-style/index.md
@@ -3,28 +3,28 @@ title: text-decoration-style
 slug: Web/CSS/text-decoration-style
 tags:
   - CSS
-  - CSS テキスト装飾
   - CSS プロパティ
-  - Layout
-  - Reference
+  - CSS テキスト装飾
   - レイアウト
+  - Reference
+  - recipe:css-property
+browser-compat: css.properties.text-decoration-style
 translation_of: Web/CSS/text-decoration-style
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-decoration-style</code></strong> プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され <code>text-decoration-line</code> で定義された線ごとに異なる種類を定義する方法はありません。</p>
+[CSS](/ja/docs/Web/CSS) の **`text-decoration-style`** プロパティは、 {{ cssxref("text-decoration-line") }} で指定された線の種類を設定します。線の種類はすべての線に適用され `text-decoration-line` で定義された線ごとに異なる種類を定義する方法はありません。
 
-<div>{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{ HTMLElement("del") }} や {{ HTMLElement("s") }} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。
 
-<p>文字列を貫く線で文字列が削除されたことを示すように、指定された装飾が特定の意味を持つ場合は、 {{HTMLElement("del")}} や {{HTMLElement("s")}} といった HTML タグでその意味を示すことが推奨されます。ブラウザーはスタイルを無効にする場合がありますが、そのようなときでも意味論上の意味が失われません。</p>
+線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。
 
-<p>線の装飾に関する複数のプロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使用したほうが便利かもしれません。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css">/* キーワード値 */
+```css
+/* キーワード値 */
 text-decoration-style: solid;
 text-decoration-style: double;
 text-decoration-style: dotted;
@@ -34,80 +34,76 @@ text-decoration-style: wavy;
 /* グローバル値 */
 text-decoration-style: inherit;
 text-decoration-style: initial;
+text-decoration-style: revert;
 text-decoration-style: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>solid</dt>
- <dd>単独線を描画します。</dd>
- <dt>double</dt>
- <dd>二重線を描画します。</dd>
- <dt>dotted</dt>
- <dd>点線を描画します。</dd>
- <dt>dashed</dt>
- <dd>破線を描画します。</dd>
- <dt>wavy</dt>
- <dd>波線を描画します。</dd>
- <dt>-moz-none{{ non-standard_inline }}</dt>
- <dd>線を描画しません。代わりに {{ cssxref("text-decoration-line") }}<code>: none</code> を使用してください。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+### 値
+
+- solid
+  - : 単独線を描画します。
+- double
+  - : 二重線を描画します。
+- dotted
+  - : 点線を描画します。
+- dashed
+  - : 破線を描画します。
+- wavy
+  - : 波線を描画します。
+- \-moz-none{{ non-standard_inline }}
+  - : 線を描画しません。代わりに {{ cssxref("text-decoration-line") }}`: none` を使用してください。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## Examples
+
+<h3 id="Setting_a_wavy_underline">波線の下線を設定</h3>
 
-<pre class="brush: css" class="hidden">.example {
+```css
+.example {
        -moz-text-decoration-line: underline;
        -moz-text-decoration-style: wavy;
        -moz-text-decoration-color: red;
     -webkit-text-decoration-line: underline;
     -webkit-text-decoration-style: wavy;
     -webkit-text-decoration-color: red;
-}</pre>
+}
+```
+
+#### CSS
 
-<pre class="brush: css">.wavy {
+```css
+.wavy {
   text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: red;
 }
-</pre>
+```
+
+#### HTML
 
-<pre class="brush: html">&lt;p class="wavy"&gt;This text has a wavy red line beneath it.&lt;/p&gt;
-</pre>
+```html
+<p class="wavy">このテキストには付近に赤い波線があります。</p>
+```
 
-<p>{{ EmbedLiveSample('Examples', '', '', '') }}</p>
+#### Results
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{ EmbedLiveSample('Setting_a_wavy_underline', '', '', '') }}
 
-<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-style', 'text-decoration-style') }}</td>
-   <td>{{ Spec2('CSS3 Text Decoration') }}</td>
-   <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義するための一括指定になりました。</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
 
-<p>{{cssinfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.properties.text-decoration-style")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li>
-</ul>
+- 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。