Web/CSS/text-emphasis を更新 (#2019)

- 2021/07/24 時点の英語版に同期

1 files changed, 33 insertions, 38 deletions

diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html
index 8d838fe112..6d0ae6bf2c 100644
--- a/files/ja/web/css/text-emphasis/index.html
+++ b/files/ja/web/css/text-emphasis/index.html
@@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis
 ---
 <div>{{CSSRef}}</div>
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+<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>
 
 <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div>
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
-
 <p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p>
 
-<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p>
+<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p>
 
 <div class="note">
-<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p>
+<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p>
 </div>
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+<h2 id="Constituent_properties">構成要素のプロパティ</h2>
+
+<p>このプロパティは以下のプロパティの一括指定です。</p>
+
+<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>
+
+<h2 id="Syntax">構文</h2>
 
 <pre class="brush:css no-line-numbers">/* 初期値 */
 text-emphasis: none; /* 圏点なし */
@@ -38,7 +45,7 @@ text-emphasis: 'x';
 text-emphasis: '点';
 text-emphasis: '\25B2';
 text-emphasis: '*' #555;
-text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */
+text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */
 
 /* キーワード値 */
 text-emphasis: filled;
@@ -52,18 +59,19 @@ text-emphasis: filled sesame #555;
 /* グローバル値 */
 text-emphasis: inherit;
 text-emphasis: initial;
+text-emphasis: revert;
 text-emphasis: unset;
 </pre>
 
-<h3 id="Values" name="Values">値</h3>
+<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>
+ <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd>
  <dt><code>open</code></dt>
- <dd>図形は中抜きになります。</dd>
+ <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>
@@ -75,18 +83,22 @@ text-emphasis: unset;
  <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>
+ <dd>記号として文字列を表示します。 <code>&lt;string&gt;</code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd>
  <dt><code>&lt;color&gt;</code></dt>
- <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd>
+ <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd>
 </dl>
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+<h2 id="Formal_definition">公式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="Formal_syntax">形式文法</h2>
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3>
+<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3>
 
 <p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p>
 
@@ -100,36 +112,19 @@ text-emphasis: unset;
 
 <pre class="brush: html">&lt;h2&gt;これは重要です！&lt;/h2&gt;</pre>
 
-<h4 id="Result" name="Result">結果</h4>
+<h4 id="Result">結果</h4>
 
 <p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p>
 
-<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-emphasis-property', 'text-emphasis')}}</td>
-   <td>{{Spec2('CSS3 Text Decoration')}}</td>
-   <td>初回定義</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-emphasis")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+<h2 id="See_also">関連情報</h2>
 
 <ul>
  <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li>