CSS Text モジュールの文書を更新

- 2021/08/13 時点の英語版に同期
- Web/CSS/CSS_Text/Wrapping_Text を新規翻訳

1 files changed, 61 insertions, 71 deletions

diff --git a/files/ja/web/css/hanging-punctuation/index.md b/files/ja/web/css/hanging-punctuation/index.md
index 858ebb6b1c..5a23b7c2bc 100644
--- a/files/ja/web/css/hanging-punctuation/index.md
+++ b/files/ja/web/css/hanging-punctuation/index.md
@@ -4,7 +4,7 @@ slug: Web/CSS/hanging-punctuation
 tags:
   - CSS
   - CSS Property
-  - CSS Text
+  - CSS テキスト
   - CSS テキスト
   - CSS プロパティ
   - Experimental
@@ -12,11 +12,12 @@ tags:
   - リファレンス
 translation_of: Web/CSS/hanging-punctuation
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><strong><code>hanging-punctuation</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。</span></p>
+**`hanging-punctuation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。
 
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 hanging-punctuation: none;
 hanging-punctuation: first;
 hanging-punctuation: last;
@@ -37,86 +38,75 @@ hanging-punctuation: first allow-end last;
 /* グローバル値 */
 hanging-punctuation: inherit;
 hanging-punctuation: initial;
+hanging-punctuation: revert;
 hanging-punctuation: unset;
-</pre>
+```
+
+## 構文
+
+`hanging-punctuation` プロパティは 1 つ、2 つ、3 つの値で指定することができます。
+
+- **値 1 つ**の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。
+- **値 2 つ**の構文は、次のうち 1 つを使用します。
 
-<p>{{CSSInfo}}</p>
+  - `first` と併せて、`last`, `allow-end`, `force-end` のいずれか
+  - `last` と併せて、`first`, `allow-end`, `force-end` のいずれか
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- **値 3 つ**の構文は、次のうち 1 つを使用します。
 
-<p><code>hanging-punctuation</code> プロパティは 1 つ、2 つ、 3 つの値で指定することができます。</p>
+  - `first`, `allow-end`, `last`
+  - `first`, `force-end`, `last`
 
-<ul>
- <li><strong>値1つ</strong>の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。</li>
- <li><strong>値2つ</strong>の構文は、次のうち 1 つを使用します。
-  <ul>
-   <li><code>first</code> と併せて、<code>last</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li>
-   <li><code>last</code> と併せて、<code>first</code>, <code>allow-end</code>, <code>force-end</code> のいずれか</li>
-  </ul>
- </li>
- <li><strong>値3つ</strong>の構文は、次のうち 1 つを使用します。
-  <ul>
-   <li><code>first</code>, <code>allow-end</code>, <code>last</code></li>
-   <li><code>first</code>, <code>force-end</code>, <code>last</code></li>
-  </ul>
- </li>
-</ul>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `none`
+  - : 文字のぶら下げを行いません。
+- `first`
+  - : 要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。
+- `last`
+  - : 要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。
+- `force-end`
+  - : 行末の句読点をぶら下げます。
+- `allow-end`
+  - : 句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
 
-<dl>
- <dt><code>none</code></dt>
- <dd>文字のぶら下げを行いません。</dd>
- <dt><code>first</code></dt>
- <dd>要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。</dd>
- <dt><code>last</code></dt>
- <dd>要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。</dd>
- <dt><code>force-end</code></dt>
- <dd>行末の句読点をぶら下げます。</dd>
- <dt><code>allow-end</code></dt>
- <dd>句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{cssinfo}}
 
-{{CSSSyntax}}
+## 形式文法
 
-<h2 id="Example" name="Example">例</h2>
+{{csssyntax}}
 
-<h3 id="HTML">HTML</h3>
+## 例
 
-<pre class="brush: html notranslate" style="white-space: pre-wrap;">&lt;p&gt;“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”&lt;/p&gt;</pre>
+<h3 id="Setting_opening_and_closing_quotes_to_hang">開始と終了の引用符をぶら下げるよう設定</h3>
 
-<h3 id="CSS">CSS</h3>
+#### HTML
 
-<pre class="brush: css notranslate">p {
+```html
+<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
+```
+
+#### CSS
+
+```css
+p {
   hanging-punctuation: first last;
   margin: .5rem;
-}</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</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", "#hanging-punctuation-property", "hanging-punctuation")}}</td>
-   <td>{{Spec2("CSS3 Text")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.hanging-punctuation")}}</p>
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_opening_and_closing_quotes_to_hang")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+- [CSS Tricks: Hanging punctuation](https://css-tricks.com/almanac/properties/h/hanging-punctuation/)