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

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

1 files changed, 57 insertions, 63 deletions

diff --git a/files/ja/web/css/text-justify/index.md b/files/ja/web/css/text-justify/index.md
index 0c7a270d9f..13781819fe 100644
--- a/files/ja/web/css/text-justify/index.md
+++ b/files/ja/web/css/text-justify/index.md
@@ -3,59 +3,69 @@ title: text-justify
 slug: Web/CSS/text-justify
 tags:
   - CSS
-  - CSS テキスト
   - CSS プロパティ
+  - CSS テキスト
   - Reference
+  - recipe:css-property
   - text-justify
+browser-compat: css.properties.text-justify
 translation_of: Web/CSS/text-justify
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+**`text-justify`** は CSS のプロパティで、要素に {{cssxref("text-align")}}`: justify;` が設定された時にテキストに適用される両端揃えの種類を設定します。
 
-<p>CSS の <strong><code>text-justify</code></strong> プロパティは、要素に {{cssxref("text-align")}}<code>: justify;</code> が設定された時にテキストに適用される両端揃えの種類を設定します。</p>
+## 構文
 
-<pre class="brush: css no-line-numbers">text-justify: none;
+```css
+text-justify: none;
 text-justify: auto;
 text-justify: inter-word;
 text-justify: inter-character;
 text-justify: distribute; /* 非推奨の値 */
-</pre>
 
-<div>{{cssinfo}}</div>
+/* Global values */
+text-justify: inherit;
+text-justify: initial;
+text-justify: revert;
+text-justify: unset;
+```
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
 
-<p><code>text-justify</code> プロパティは、以下の値のリストのうち一つのキーワードで指定します。</p>
+- `none`
+  - : テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。
+- `auto`
+  - : ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは `text-justify` をまったく設定しない場合に使われる既定の揃え方です。
+- `inter-word`
+  - : 単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。
+- `inter-character`
+  - : 文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。
+- `distribute` {{deprecated_inline}}
+  - : `inter-character` と同じ動作を見せます。この値は後方互換性のためのものです。
 
-<h3 id="Values" name="Values">値</h3>
+## 公式定義
 
-<dl>
- <dt><code>none</code></dt>
- <dd>テキストの両端揃えは行われません。これは {{cssxref("text-align")}} をまったく設定しない場合と同様の効果を持ちますが、何らかの理由で両端揃えを有効または無効にする必要があるときに便利です。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザーは性能と品質の釣り合いに基づいて、テキストの言語 (例えば英語か、日本語か、中国語かなど) に最も適切なものは何かも加味して、現在の状況のために最適な種類の揃え方を選択します。これは <code>text-justify</code> をまったく設定しない場合に使われる既定の揃え方です。</dd>
- <dt><code>inter-word</code></dt>
- <dd>単語間に間隔を挿入する (事実上 {{cssxref("word-spacing")}} を変化させる) ことでテキストを揃えるもので、これは英語や韓国語のように、空白で単語を区切る言語に最も適しています。</dd>
- <dt><code>inter-character</code></dt>
- <dd>文字間に間隔を挿入する (事実上 {{cssxref("letter-spacing")}} を変化させる) ことでテキストを揃えるもので、これは日本語のような言語に最も適しています。</dd>
- <dt><code>distribute</code> {{deprecated_inline}}</dt>
- <dd><code>inter-character</code> と同じ動作を見せます。この値は後方互換性のためのものです。</dd>
-</dl>
+{{CSSInfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 形式文法
 
-{{CSSSyntax}}
+{{csssyntax}}
 
 <h2 id="Examples" name="Examples">例</h2>
 
-<div class="hidden">
-<pre class="brush: html">&lt;p class="none"&gt;&lt;code&gt;text-justify: none&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
-&lt;p class="auto"&gt;&lt;code&gt;text-justify: auto&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
-&lt;p class="dist"&gt;&lt;code&gt;text-justify: distribute&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
-&lt;p class="word"&gt;&lt;code&gt;text-justify: inter-word&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;
-&lt;p class="char"&gt;&lt;code&gt;text-justify: inter-character&lt;/code&gt; —&lt;br&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.&lt;/p&gt;</pre>
-</div>
+### text-justify の様々な値のデモ
 
-<pre class="brush: css">p {
+```html hidden
+<p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
+```
+
+```css
+p {
   font-size: 1.5em;
   border: 1px solid black;
   padding: 10px;
@@ -82,35 +92,19 @@ text-justify: distribute; /* 非推奨の値 */
 
 .char {
   text-justify: inter-character;
-}</pre>
-
-<div>{{EmbedLiveSample("Examples","100%",400)}}</div>
-
-<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', '#text-justify-property', 'text-justify')}}</td>
-   <td>{{Spec2('CSS3 Text')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>{{Compat("css.properties.text-justify")}}</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("text-align")}}</li>
-</ul>
+}
+```
+
+{{EmbedLiveSample("Examples","100%",400)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("text-align")}}