:focus 系のセレクターの文書を更新

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

3 files changed, 152 insertions, 213 deletions

diff --git a/files/ja/web/css/_colon_focus-visible/index.md b/files/ja/web/css/_colon_focus-visible/index.md
index b0ade4e723..2d8d0618eb 100644
--- a/files/ja/web/css/_colon_focus-visible/index.md
+++ b/files/ja/web/css/_colon_focus-visible/index.md
@@ -5,40 +5,40 @@ tags:
   - ':focus'
   - ':focus-visible'
   - CSS
-  - Experimental
-  - Layout
-  - Pseudo-class
-  - Reference
-  - Selector
-  - Web
+  - レイアウト
+  - 擬似クラス
+  - リファレンス
+  - セレクター
+  - ウェブ
 translation_of: 'Web/CSS/:focus-visible'
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>:focus-visible</code></strong> 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。</p>
+**`:focus-visible`** 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると推測的に判断した場合に適用されます (多くのブラウザーではこの場合、既定で「フォーカスリング」を表示します)。
 
-<p>このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。</p>
+このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。
 
-<p>なお、 Firefox は似た機能をより古い接頭辞付きの擬似クラス、 {{CSSxRef(":-moz-focusring")}} で対応しています。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{CSSSyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+<h3 id="Basic_example">基本的な例</h3>
 
-<p>この例では、 <code>:focus-visible</code> セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 <code>:focus</code> でスタイル付けされた要素との動作の違いに注意してください。</p>
+この例では、`:focus-visible` セレクターはユーザーエージェントの動作を使用して照合するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、`:focus` でスタイル付けされた要素との動作の違いに注意してください。
 
-<pre class="brush: html notranslate">&lt;input value="Default styles"&gt;&lt;br&gt;
-&lt;button&gt;Default styles&lt;/button&gt;&lt;br&gt;
-&lt;input class="focus-only" value=":focus only"&gt;&lt;br&gt;
-&lt;button class="focus-only"&gt;:focus only&lt;/button&gt;&lt;br&gt;
-&lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
-&lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
+```html
+<input value="既定のスタイル"><br>
+<button>既定のスタイル</button><br>
+<input class="focus-only" value=":focus のみ"><br>
+<button class="focus-only">:focus のみ</button><br>
+<input class="focus-visible-only" value=":focus-visible のみ"><br>
+<button class="focus-visible-only">:focus-visible のみ</button>
+```
 
-<pre class="brush: css highlight[9] notranslate">input, button {
+```css
+input, button {
   margin: 10px;
 }
 
@@ -49,17 +49,20 @@ translation_of: 'Web/CSS/:focus-visible'
 .focus-visible-only:focus-visible {
   outline: 4px dashed darkorange;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Basic_example", "100%", 300)}}</p>
+{{EmbedLiveSample("Basic_example", "100%", 300)}}
 
-<h3 id="Selectively_showing_the_focus_indicator" name="Selectively_showing_the_focus_indicator">フォーカスインジケーターの選択的な表示</h3>
+<h3 id="Selectively_showing_the_focus_indicator">フォーカスインジケーターの選択的な表示</h3>
 
-<p>カスタムコントロール、例えば <a href="/ja/docs/User:Andreas_Wuest/Custom_Elements">カスタム要素</a>ボタンなどは、 <code>:focus-visible</code> を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは {{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。</p>
+カスタムコントロール、例えばカスタム要素のボタンなどは、`:focus-visible` を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは{{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。
 
-<pre class="brush: html notranslate">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
+```html
+<custom-button tabindex="0" role="button">クリックしてください</custom-button>
+```
 
-<pre class="brush: css highlight[13, 19] notranslate">custom-button {
+```css
+custom-button {
   display: inline-block;
   margin: 10px;
 }
@@ -67,7 +70,7 @@ translation_of: 'Web/CSS/:focus-visible'
 custom-button:focus {
   /* Provide a fallback style for browsers
      that don't support :focus-visible */
-  outline: none;
+  outline: 2px solid red;
   background: lightgrey;
 }
 
@@ -83,54 +86,36 @@ custom-button:focus-visible {
      :focus-visible */
   outline: 4px dashed darkorange;
   background: transparent;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}</p>
+{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 60)}}
 
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+## ポリフィル
 
-<p><a href="https://github.com/WICG/focus-visible">focus-visible.js</a> を使用して <code>:focus-visible</code> のポリフィルにすることができます。</p>
+`:focus-visible` のポリフィルとして [focus-visible.js](https://github.com/WICG/focus-visible) を使用することができます。
 
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+## アクセシビリティの考慮
 
-<h3 id="Low_vision" name="Low_vision">弱視</h3>
+### 弱視
 
-<p>視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。</p>
+視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。
 
-<ul>
- <li>アクセシブルな視覚的フォーカスインジケーター: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
-</ul>
+- アクセシブルな視覚的フォーカスインジケーター: [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
 
-<h3 id="Cognition" name="Cognition">認知障碍</h3>
+### 認知障碍
 
-<p>人が形式が混在した入力フィールドを使用している場合、フォーカスインジケーターが表示されたり消えたりする理由が明確に分からないかもしれません。認知的な懸念のあるユーザーや技術的なリテラシーの低いユーザーにとっては、対話的要素が一貫した動作をしていないと、混乱を招くかもしれません。</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("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("css.selectors.focus-visible")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{CSSxRef(":focus")}}</li>
- <li>{{CSSxRef(":focus-within")}}</li>
-</ul>
+- {{CSSxRef(":focus")}}
+- {{CSSxRef(":focus-within")}}
diff --git a/files/ja/web/css/_colon_focus-within/index.md b/files/ja/web/css/_colon_focus-within/index.md
index c3c4b07970..b62a217a7e 100644
--- a/files/ja/web/css/_colon_focus-within/index.md
+++ b/files/ja/web/css/_colon_focus-within/index.md
@@ -5,47 +5,53 @@ tags:
   - ':focus'
   - ':focus-within'
   - CSS
-  - Layout
-  - Pseudo-class
-  - Reference
-  - Selector
-  - Web
+  - レイアウト
+  - 擬似クラス
+  - リファレンス
+  - セレクター
+  - ウェブ
+browser-compat: css.selectors.focus-within
 translation_of: 'Web/CSS/:focus-within'
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:focus-within</code></strong> <a href="/ja/docs/CSS/Pseudo-classes">擬似クラス</a>は、フォーカスを持っているか、フォーカスを持った要素を<em>含む</em>要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に <code>:focus</code> に該当する要素がある要素を表します。 (これは<a href="/ja/docs/Web/Web_Components/Shadow_DOM">シャドウツリー</a>における子孫も含みます。)</p>
+**`:focus-within`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、その要素または子孫要素にフォーカスがある場合にいっちします。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に `:focus` に該当する要素がある要素を表します。 (これは[シャドウツリー](/ja/docs/Web/Web_Components/Using_shadow_DOM)における子孫も含みます。)
 
-<pre class="brush: css no-line-numbers notranslate">/* 子孫要素の一つにフォーカスがある &lt;div&gt; を選択 */
+```css
+/* 子孫要素の一つにフォーカスがある <div> を選択 */
 div:focus-within {
   background: cyan;
-}</pre>
+}
+```
 
-<p>このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。</p>
+このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} 全体を強調する場合に便利です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{CSSSyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<p>この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。</p>
+この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html notranslate">&lt;p&gt;このフォームに入力してみてください。&lt;/p&gt;
+```html
+<p>このフォームに入力してみてください。</p>
 
-&lt;form&gt;
-  &lt;label for="given_name"&gt;名前:&lt;/label&gt;
-  &lt;input id="given_name" type="text"&gt;
-  &lt;br&gt;
-  &lt;label for="family_name"&gt;苗字:&lt;/label&gt;
-  &lt;input id="family_name" type="text"&gt;
-&lt;/form&gt;</pre>
+<form>
+  <label for="given_name">名前:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">苗字:</label>
+  <input id="family_name" type="text">
+</form>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css highlight[7] notranslate">form {
+```css
+form {
   border: 1px solid;
   color: gray;
   padding: 4px;
@@ -59,39 +65,22 @@ form:focus-within {
 input {
   margin: 4px;
 }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Examples", 500, 150)}}</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("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.focus-within")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSSxRef(":focus")}}</li>
- <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
- <li><a href="https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4">Grab your user's attention with the focus-within selector</a></li>
-</ul>
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples", 500, 150)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef(":focus")}}
+- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
+- [Grab your user's attention with the focus-within selector](https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4)
diff --git a/files/ja/web/css/_colon_focus/index.md b/files/ja/web/css/_colon_focus/index.md
index 01c4077455..840290e034 100644
--- a/files/ja/web/css/_colon_focus/index.md
+++ b/files/ja/web/css/_colon_focus/index.md
@@ -2,44 +2,46 @@
 title: ':focus'
 slug: 'Web/CSS/:focus'
 tags:
+  - ':focus'
   - CSS
-  - Layout
-  - Reference
-  - Web
-  - ウェブ
-  - セレクター
   - レイアウト
   - 擬似クラス
-  - 疑似クラス
+  - リファレンス
+  - セレクター
+  - ウェブ
+browser-compat: css.selectors.focus
 translation_of: 'Web/CSS/:focus'
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>:focus</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。</p>
+**`:focus`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、フォーカスを持っている (フォームの input のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの <kbd>Tab</kbd> キーで選択したりしたときです。
 
-<pre class="brush: css no-line-numbers notranslate">/* フォーカスを持つ &lt;input&gt; 要素を選択 */
+```css
+/* フォーカスを持つ <input> 要素を選択 */
 input:focus {
   color: red;
-}</pre>
+}
+```
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を<em>含む</em>要素を選択したい場合は、 {{CSSxRef(":focus-within")}} を使用してください。</p>
-</div>
+> **Note:** この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を*含む*要素を選択したい場合は、{{CSSxRef(":focus-within")}} を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{CSSSyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html no-line-numbers notranslate">&lt;input class="red-input" value="I'll be red when focused."&gt;&lt;br&gt;
-&lt;input class="blue-input" value="I'll be blue when focused."&gt;</pre>
+```html
+<div><input class="red-input" value="フォーカスで赤くなります。"></div>
+<div><input class="blue-input" value="フォーカスで青くなります。"></div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css highlight[1, 6] notranslate">.red-input:focus {
+```css
+.red-input:focus {
   background: yellow;
   color: red;
 }
@@ -47,71 +49,34 @@ input:focus {
 .blue-input:focus {
   background: yellow;
   color: blue;
-}</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="Accessibility_Concerns" name="Accessibility_Concerns">アクセシビリティの考慮事項</h2>
-
-<p>視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。</p>
-
-<ul>
- <li>Accessible Visual Focus Indicators: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li>
-</ul>
-
-<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3>
-
-<p><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">WCAG 2.1 SC 1.4.11 Non-Text Contrast</a> を満たすフォーカスの輪郭線で置き換えることなく、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を単に削除しないでください。</p>
-
-<ul>
- <li>Quick Tip:  <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></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("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>HTML に依存した意味論を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td>
-   <td>{{Spec2("CSS4 Selectors")}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td>
-   <td>{{Spec2("CSS3 Selectors")}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td>初回定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.focus")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li>
- <li>{{CSSxRef(":focus-within")}}</li>
-</ul>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Examples")}}
+
+## アクセシビリティの考慮
+
+視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。
+
+- Accessible Visual Focus Indicators: [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
+
+### `:focus { outline: none; }`
+
+[WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) を満たすフォーカスの輪郭線で置き換えることなしに、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を削除しないでください。
+
+- Quick Tip: [Never remove CSS outlines](https://a11yproject.com/posts/never-remove-css-outlines/)
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef(":focus-visible")}}
+- {{CSSxRef(":focus-within")}}