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

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

1 files changed, 67 insertions, 71 deletions

diff --git a/files/ja/web/css/text-emphasis/index.md b/files/ja/web/css/text-emphasis/index.md
index 6d0ae6bf2c..5cfe98ea06 100644
--- a/files/ja/web/css/text-emphasis/index.md
+++ b/files/ja/web/css/text-emphasis/index.md
@@ -3,44 +3,39 @@ title: text-emphasis
 slug: Web/CSS/text-emphasis
 tags:
   - CSS
-  - CSS テキスト装飾
   - CSS プロパティ
+  - CSS テキスト装飾
   - Reference
-  - text-emphasis
-  - text-emphasis-color
-  - text-emphasis-style
-  - 一括指定プロパティ
+  - recipe:css-shorthand-property
+browser-compat: css.properties.text-emphasis
 translation_of: Web/CSS/text-emphasis
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+**`text-emphasis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)です。
 
-<div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
+{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}
 
-<p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p>
+`text-emphasis` プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 `text-decoration` プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 `text-emphasis` は継承されます。これは、子孫に対して圏点を変更できることを意味します。
 
-<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p>
+圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 `text-emphasis` は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。
 
-<div class="note">
-<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p>
-</div>
+> **Note:** `text-emphasis` は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。珍しくもこれを必要とするような場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。
 
-<h2 id="Constituent_properties">構成要素のプロパティ</h2>
+## 構成要素のプロパティ
 
-<p>このプロパティは以下のプロパティの一括指定です。</p>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li>
- <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li>
-</ul>
+- [`text-emphasis-color`](/ja/docs/Web/CSS/text-emphasis-color)
+- [`text-emphasis-style`](/ja/docs/Web/CSS/text-emphasis-style)
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers">/* 初期値 */
+```css
+/* 初期値 */
 text-emphasis: none; /* 圏点なし */
 
-/* &lt;string&gt; 値 */
+/* <string> 値 */
 text-emphasis: 'x';
 text-emphasis: '点';
 text-emphasis: '\25B2';
@@ -61,72 +56,73 @@ text-emphasis: inherit;
 text-emphasis: initial;
 text-emphasis: revert;
 text-emphasis: unset;
-</pre>
-
-<h3 id="Values">値</h3>
-
-<dl>
- <dt><code>none</code></dt>
- <dd>圏点なし。</dd>
- <dt><code>filled</code></dt>
- <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd>
- <dt><code>open</code></dt>
- <dd>図形が中抜きになります。</dd>
- <dt><code>dot</code></dt>
- <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd>
- <dt><code>circle</code></dt>
- <dd>記号として大きな円を表示します。 filled circle は <code>'●'</code> (<code>U+25CF</code>)、 open circle は <code>'○'</code> (<code>U+25CB</code>) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。</dd>
- <dt><code>double-circle</code></dt>
- <dd>記号として二重丸を表示します。 filled double-circle は <code>'◉'</code> (<code>U+25C9</code>)、 open double-circle は <code>'◎'</code> (<code>U+25CE</code>) です。</dd>
- <dt><code>triangle</code></dt>
- <dd>記号として三角形を表示します。 filled triangle は <code>'▲'</code> (<code>U+25B2</code>)、 open triangle は <code>'△'</code> (<code>U+25B3</code>) です。</dd>
- <dt><code>sesame</code></dt>
- <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd>
- <dt><code>&lt;string&gt;</code></dt>
- <dd>記号として文字列を表示します。 <code>&lt;string&gt;</code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd>
-</dl>
-
-<h2 id="Formal_definition">公式定義</h2>
-
-<p>{{CSSInfo}}</p>
-
-<h2 id="Formal_syntax">形式文法</h2>
+```
+
+### 値
+
+- `none`
+  - : 圏点なし。
+- `filled`
+  - : 図形が単色で塗りつぶされます。 `filled` も `open` も指定されていない場合は、これが既定値です。
+- `open`
+  - : 図形が中抜きになります。
+- `dot`
+  - : 記号として小さな円を表示します。filled dot は `'•'` (`U+2022`)、open dot は `'◦'` (`U+25E6`) です。
+- `circle`
+  - : 記号として大きな円を表示します。filled circle は `'●'` (`U+25CF`)、open circle は `'○'` (`U+25CB`) です。これは、他の図形が与えられていない場合、横書きモードで既定の形状です。
+- `double-circle`
+  - : 記号として二重丸を表示します。filled double-circle は `'◉'` (`U+25C9`)、open double-circle は `'◎'` (`U+25CE`) です。
+- `triangle`
+  - : 記号として三角形を表示します。filled triangle は `'▲'` (`U+25B2`)、open triangle は `'△'` (`U+25B3`) です。
+- `sesame`
+  - : 記号としてゴマを表示します。filled sesame は `'﹅'` (`U+FE45`)、open sesame は`'﹆'` (`U+FE46`) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。
+- `<string>`
+  - : 記号として文字列を表示します。 `&lt;string&gt;` には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。
+- `<color>`
+  - : 記号の色を定義します。 color を指定しない場合、既定では `currentcolor` です。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples">例</h2>
+## Examples
 
 <h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3>
 
-<p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p>
+この例は、見出しの各文字に三角形の圏点を付けて描画します。
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">h2 {
+```css
+h2 {
+  -webkit-text-emphasis: triangle #D55;
   text-emphasis: triangle #D55;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h2&gt;これは重要です！&lt;/h2&gt;</pre>
+```html
+<h2>これは重要です！</h2>
+```
 
-<h4 id="Result">結果</h4>
+#### Result
 
-<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p>
+{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 90)}}
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li>
- <li>圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ。</li>
-</ul>
+- 個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}
+- 圏点の位置の定義を可能にする {{cssxref('text-emphasis-position')}} プロパティ