CSS 基本ユーザーインターフェイスの文書を更新

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

1 files changed, 75 insertions, 87 deletions

diff --git a/files/ja/web/css/outline/index.md b/files/ja/web/css/outline/index.md
index 3bfa1c474a..8e75e0a488 100644
--- a/files/ja/web/css/outline/index.md
+++ b/files/ja/web/css/outline/index.md
@@ -3,36 +3,32 @@ title: outline
 slug: Web/CSS/outline
 tags:
   - CSS
-  - CSS プロパティ
-  - CSS 基本ユーザーインターフェイス
   - CSS 輪郭線
-  - Layout
-  - Reference
+  - CSS プロパティ
   - レイアウト
+  - Reference
+  - recipe:css-shorthand-property
+browser-compat: css.properties.outline
 translation_of: Web/CSS/outline
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>outline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+**`outline`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、輪郭線 (outline) に関する様々なプロパティを単一の宣言で設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div>
+{{EmbedInteractiveExample("pages/css/outline.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+## 構成要素のプロパティ
 
-<p>他の一括指定プロパティと同様に、省略された値は<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に設定されます。</p>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<h3 id="Borders_vs._outlines" name="Borders_vs._outlines">境界線と輪郭線</h3>
+- {{cssxref("outline-color")}}
+- {{cssxref("outline-style")}}
+- {{cssxref("outline-width")}}
 
-<p><a href="/ja/docs/Web/CSS/border">境界線</a>と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。</p>
+## 構文
 
-<ul>
- <li>輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。</li>
- <li>仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。</li>
-</ul>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush: css no-line-numbers notranslate">/* 種類 */
+```css
+/* 種類 */
 outline: solid;
 
 /* 色 | 種類 */
@@ -47,40 +43,61 @@ outline: green solid 3px;
 /* グローバル値 */
 outline: inherit;
 outline: initial;
+outline: revert;
 outline: unset;
-</pre>
+```
 
-<p><code>outline</code> プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。</p>
+`outline` プロパティは以下に挙げた 1 ～ 3 つの値を用いて指定することができます。値は順不同です。
 
-<div class="note">
-<p><strong>メモ:</strong> 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が <code>none</code> だからです。特筆すべき例外は <code>input</code> 要素で、ブラウザーが既定のスタイルを与えます。</p>
+> **Note:** 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が `none` だからです。特筆すべき例外は `input` 要素で、ブラウザーが既定のスタイルを与えます。
 </div>
 
-<h3 id="Values_2" name="Values_2">値</h3>
+### 値
+
+- `<'outline-color'>`
+  - : 輪郭線の色を設定します。未指定の場合の既定値は `currentcolor` です。 {{cssxref("outline-color")}} を参照してください。
+- `<'outline-style'>`
+  - : 輪郭線の種類を設定します。未指定の場合の既定値は `none` です。 {{cssxref("outline-style")}} を参照してください。
+- `<'outline-width'>`
+  - : 輪郭線の太さを設定します。未指定の場合の既定値は `medium` です。 {{cssxref("outline-width")}} を参照してください。
+
+## 解説
+
+[境界線](/ja/docs/Web/CSS/border)と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。
+
+- 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。- 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。
+
+他の一括指定プロパティと同様に、省略された値は[初期値](/ja/docs/Web/CSS/initial_value)に設定されます。
+
+## アクセシビリティの考慮
+
+`outline` の値を `0` または `none` にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。
 
-<dl>
- <dt><code>&lt;'outline-color'&gt;</code></dt>
- <dd>輪郭線の色を設定します。未指定の場合の既定値は <code>currentcolor</code> です。 {{cssxref("outline-color")}} を参照してください。</dd>
- <dt><code>&lt;'outline-style'&gt;</code></dt>
- <dd>輪郭線の種類を設定します。未指定の場合の既定値は <code>none</code> です。 {{cssxref("outline-style")}} を参照してください。</dd>
- <dt><code>&lt;'outline-width'&gt;</code></dt>
- <dd>輪郭線の太さを設定します。未指定の場合の既定値は <code>medium</code> です。 {{cssxref("outline-width")}} を参照してください。</dd>
-</dl>
+- [How to Design Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) <li>
+  <abbr>WCAG</abbr> 2.1: [成功基準 2.4.7 の理解: フォーカスの可視性](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+<h3 id="Using_outline_to_set_a_focus_style">輪郭線を使用してフォーカスのスタイルを設定</h3>
 
-<h3 id="HTML">HTML</h3>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;a href="#"&gt;このリンクは特殊なフォーカスのスタイルです。&lt;/a&gt;
-</pre>
+```html
+<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
+```
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<pre class="brush: css notranslate">a {
+```css
+a {
   border: 1px solid;
   border-radius: 3px;
   display: inline-block;
@@ -93,51 +110,22 @@ a:focus {
   outline-offset: 4px;
   background: #ffa;
 }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example", "100%", 60)}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p><code>outline</code> の値を <code>0</code> または <code>none</code> にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。</p>
-
-<ul>
- <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
- <li>
-  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">成功基準 2.4.7 の理解: フォーカスの可視性</a></p>
- </li>
-</ul>
-
-<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 Basic UI', '#outline', 'outline')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.properties.outline")}}</p>
-</div>
+```
+
+#### 結果
+
+{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("outline-color")}}
+- {{cssxref("outline-style")}}
+- {{cssxref("outline-width")}}