CSS Fonts の各プロパティを更新

- 2021/11/05 時点の英語版に同期

1 files changed, 111 insertions, 203 deletions

diff --git a/files/ja/web/css/font-stretch/index.md b/files/ja/web/css/font-stretch/index.md
index 07040792cb..304ef6bb31 100644
--- a/files/ja/web/css/font-stretch/index.md
+++ b/files/ja/web/css/font-stretch/index.md
@@ -6,13 +6,20 @@ tags:
   - CSS フォント
   - CSS プロパティ
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.font-stretch
 translation_of: Web/CSS/font-stretch
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><code>font-stretch</code> CSS プロパティは、フォントの normal, condensed, expanded のフェイスを選択します。</span></p>
+**`font-stretch`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+{{EmbedInteractiveExample("pages/css/font-stretch.html")}}
+
+## 構文
+
+```css
+/* キーワード値 */
 font-stretch: ultra-condensed;
 font-stretch: extra-condensed;
 font-stretch: condensed;
@@ -24,238 +31,139 @@ font-stretch: extra-expanded;
 font-stretch: ultra-expanded;
 
 /* パーセント値 */
-font-stretch: 0%;
 font-stretch: 50%;
+font-stretch: 100%;
 font-stretch: 200%;
 
 /* グローバル値 */
 font-stretch: inherit;
 font-stretch: initial;
+font-stretch: revert;
 font-stretch: unset;
-</pre>
-
-<p>フォントファミリによっては追加のフェイスを提供しており、通常より狭い文字、 (<em>condensed</em> フェイス)、通常より広い文字 (<em>expanded</em> フェイス) などがあります。</p>
-
-<p><code>font-stretch</code> を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。</p>
-
-<p>一部のサンプルフォントでこのプロパティの効果を見るには、以下の<a href="#Font_face_selection">フォントフェイスの選択</a>をご覧ください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<p>このプロパティは、単一のキーワード値又は単一の {{cssxref("&lt;percentage&gt;")}} 値として指定することができます。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>通常のフォントフェイスを指定します。</dd>
- <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
- <dd>通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。</dd>
- <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
- <dd>通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。</dd>
- <dt><code>&lt;percentage&gt;</code></dt>
- <dd>{{cssxref("&lt;percentage&gt;")}} 値です。このプロパティでは負の数は許可されていません。</dd>
-</dl>
-
-<p><code>font-stretch</code> の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <code>&lt;percentage&gt;</code> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。</p>
-
-<p>但し、 <code>&lt;percentage&gt;</code> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは <a href="#Browser_compatibility">Browser compatibility</a> をご覧ください。</p>
-
-<h3 id="Keyword_to_numeric_mapping" name="Keyword_to_numeric_mapping">キーワードと数値の対応</h3>
-
-<p>以下の表は、キーワード値とパーセントの数値の間の対応を示しています。</p>
-
-<table class="fullwidth-table standard-table">
- <thead>
-  <tr>
-   <th scope="col">キーワード</th>
-   <th scope="col">パーセント値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ultra-condensed</code></td>
-   <td>50%</td>
-  </tr>
-  <tr>
-   <td><code>extra-condensed</code></td>
-   <td>62.5%</td>
-  </tr>
-  <tr>
-   <td><code>condensed</code></td>
-   <td>75%</td>
-  </tr>
-  <tr>
-   <td><code>semi-condensed</code></td>
-   <td>87.5%</td>
-  </tr>
-  <tr>
-   <td><code>normal</code></td>
-   <td>100%</td>
-  </tr>
-  <tr>
-   <td><code>semi-expanded</code></td>
-   <td>112.5%</td>
-  </tr>
-  <tr>
-   <td><code>expanded</code></td>
-   <td>125%</td>
-  </tr>
-  <tr>
-   <td><code>extra-expanded</code></td>
-   <td>150%</td>
-  </tr>
-  <tr>
-   <td><code>ultra-expanded</code></td>
-   <td>200%</td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h3 id="Font_face_selection" name="Font_face_selection">フォントフェイスの選択</h3>
+このプロパティは、単一のキーワード値または単一の {{cssxref("&lt;percentage&gt;")}} 値として指定することができます。
 
-<p><code>font-stretch</code> で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が100%よりも小さい場合はより狭いフェイスが割り当てられ、100%と等しいか大きい場合はより広いフェイスが割り当てられます。</p>
+### 値
 
-<p>以下の表は二つの異なるフォントにおいて、 <code>font-stretch</code> に様々なパーセント値を提供した場合の効果を示しています。</p>
+- `normal`
+  - : 通常のフォントフェイスを指定します。
+- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`
+  - : 通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。
+- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
+  - : 通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。
+- `<percentage>`
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row"> </th>
-   <th scope="col">50%</th>
-   <th scope="col">62.5%</th>
-   <th scope="col">75%</th>
-   <th scope="col">87.5%</th>
-   <th scope="col">100%</th>
-   <th scope="col">112.5%</th>
-   <th scope="col">125%</th>
-   <th scope="col">150%</th>
-   <th scope="col">200%</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Helvetica Neue</th>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
-  </tr>
-  <tr>
-   <th scope="row">League Mono Variable</th>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td>
-   <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td>
-  </tr>
- </tbody>
-</table>
+  - : {{cssxref("&lt;percentage&gt;")}} 値です。このプロパティでは負の数は許可されていません。
 
-<ul>
- <li>Helvetica Neue は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 <code>font-stretch</code> の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。</li>
- <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> は、 <code>font-stretch</code> のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。</li>
-</ul>
+    > **Note:** `font-stretch` の古いバージョンの仕様書では、このプロパティは 9 つのキーワード値のみを受け付けていました。
+    >
+    > **{{ SpecName('CSS4 Fonts', '#propdef-font-stretch') }} 仕様書**で、構文が `<percentage>` を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "`wdth`" バリエーションが様々な幅を実装するために使用されます。
+    >
+    > 但し、`<percentage>` の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは[ブラウザーの互換性](#ブラウザーの互換性)をご覧ください。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+### キーワードと数値の対応
 
-{{csssyntax}}
+以下の表は、キーワード値とパーセントの数値の間の対応を示しています。
+
+| キーワード        | パーセント値 |
+| ----------------- | ------------ |
+| `ultra-condensed` | 50%          |
+| `extra-condensed` | 62.5%        |
+| `condensed`       | 75%          |
+| `semi-condensed`  | 87.5%        |
+| `normal`          | 100%         |
+| `semi-expanded`   | 112.5%       |
+| `expanded`        | 125%         |
+| `extra-expanded`  | 150%         |
+| `ultra-expanded`  | 200%         |
 
-<h2 id="Example" name="Example">例</h2>
+## 解説
 
-<h3 id="Percentage_syntax" name="Percentage_syntax">パーセント値の構文</h3>
+フォントファミリーによっては追加のフェイスを提供しており、通常より狭い文字、 (_condensed_ フェイス)、通常より広い文字 (_expanded_ フェイス) などがあります。
 
-<p>なお、この例は <code>&lt;percentage&gt;</code> 値に対応したブラウザーのみで動作します。</p>
+`font-stretch` を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。
 
-<div id="variable-font-demo">
-<h4 id="HTML">HTML</h4>
+### フォントフェイスの選択
 
-<pre class="brush: html">&lt;div class="container"&gt;
-    &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
-    &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
-    &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+`font-stretch` で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が 100% よりも小さい場合はより狭いフェイスが割り当てられ、100% と等しいか大きい場合はより広いフェイスが割り当てられます。
 
-<h4 id="CSS">CSS</h4>
+以下の表は 2 つの異なるフォントにおいて、 `font-stretch` に様々なパーセント値を提供した場合の効果を示しています。
 
-<pre class="brush: css">/*
-This example uses the League Mono Variable font, developed by
-Tyler Finck (https://www.tylerfinck.com/) and used here under
-the terms of the SIL Open Font License, Version 1.1:
-http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
-*/
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="row"></th>
+      <th scope="col">50%</th>
+      <th scope="col">62.5%</th>
+      <th scope="col">75%</th>
+      <th scope="col">87.5%</th>
+      <th scope="col">100%</th>
+      <th scope="col">112.5%</th>
+      <th scope="col">125%</th>
+      <th scope="col">150%</th>
+      <th scope="col">200%</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Helvetica Neue</th>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+    </tr>
+    <tr>
+      <th scope="row">League Mono Variable</th>
+      <td><img alt="" src="screenshot_2018-06-06_example_page.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page1.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page2.png" /></td>
+      <td><img alt="" src="screenshot_2018-06-06_example_page3.png" /></td>
+      <td><img alt="" src="l-100.png" /></td>
+      <td><img alt="" src="l-112.5.png" /></td>
+      <td><img alt="" src="l-125.png" /></td>
+      <td><img alt="" src="l-150.png" /></td>
+      <td><img alt="" src="l-200.png" /></td>
+    </tr>
+  </tbody>
+</table>
 
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
-  font-family:'LeagueMonoVariable';
-  font-style: normal;
-}
+- **Helvetica Neue** は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 `font-stretch` の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。
+- **[League Mono Variable](https://tylerfinck.com/leaguemonovariable/)** は、 `font-stretch` のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。
 
-.container {
-  border: 10px solid #f5f9fa;
-  padding: 0 1rem;
-  font: 1.5rem 'LeagueMonoVariable', sans-serif;
-}
+## 公式定義
 
-.condensed {
-  font-stretch: 50%;
-}
+{{cssinfo}}
 
-.normal {
-  font-stretch: 100%;
-}
+## 形式文法
 
-.expanded {
-  font-stretch: 200%;
-}
+{{csssyntax}}
 
-</pre>
-</div>
+## 例
 
-<h4 id="Result" name="Result">結果</h4>
+### フォントの引き伸ばしパーセント値の設定
 
-<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p>
+> **Note:** この例は、`<percentage>` 値に対応しているブラウザーでのみ動作します。
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>仕様書</th>
-   <th>状況</th>
-   <th>備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
-   <td>{{ Spec2('CSS4 Fonts') }}</td>
-   <td>可変フォントに <code>&lt;percentage&gt;</code> の構文を追加。</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
-   <td>{{ Spec2('CSS3 Fonts') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## 仕様書
+
+{{Specifications}}
+
+> **Note:** CSS プロパティ `font-stretch` は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。
 
-<div class="note">
-<p>CSS プロパティ <code>font-stretch</code> は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。</p>
-</div>
+## ブラウザーの互換性
 
-<p>{{cssinfo}}</p>
+{{Compat}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+## 関連情報
 
-<p>{{Compat("css.properties.font-stretch")}}</p>
+- {{cssxref("font-style")}}
+- {{cssxref("font-weight")}}
+- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)