2021/08/13 時点の英語版に同期

1 files changed, 56 insertions, 82 deletions

diff --git a/files/ja/web/css/_colon_valid/index.md b/files/ja/web/css/_colon_valid/index.md
index 8668267a4e..98881589b9 100644
--- a/files/ja/web/css/_colon_valid/index.md
+++ b/files/ja/web/css/_colon_valid/index.md
@@ -1,45 +1,51 @@
 ---
 title: ':valid'
-slug: 'Web/CSS/:valid'
+slug: Web/CSS/:valid
 tags:
   - CSS
-  - CSS 基本ユーザーインターフェイス
-  - Layout
-  - Pseudo-class
-  - Reference
-  - Web
+  - レイアウト
+  - 擬似クラス
+  - リファレンス
   - セレクター
-  - 疑似クラス
-translation_of: 'Web/CSS/:valid'
+  - ウェブ
+browser-compat: css.selectors.valid
+translation_of: Web/CSS/:valid
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:valid</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>は、内容の<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a>に成功した {{htmlelement("input")}} 要素 やその他の {{HTMLElement("form")}} 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。</p>
+**`:valid`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、内容物の[検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に成功した {{htmlelement("input")}} 要素 やその他の {{HTMLElement("form")}} 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。
 
-<pre class="brush: css no-line-numbers notranslate">/* 有効な &lt;input&gt; をすべて選択 */
+```css
+/* 有効な <input> をすべて選択 */
 input:valid {
   background-color: powderblue;
-}</pre>
+}
+```
 
-<p>この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。</p>
+この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### 有効／無効なフォームフィールドを示す
 
-<p>この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の <span> が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。</span></p>
+この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の `<span>` が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。
 
-<pre class="brush: html notranslate">&lt;div&gt;
-  &lt;label for="fname"&gt;First name *: &lt;/label&gt;
-  &lt;input id="fname" name="fname" type="text" required&gt;
-  &lt;span&gt;&lt;/span&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <label for="fname">First name *: </label>
+  <input id="fname" name="fname" type="text" required>
+  <span></span>
+</div>
+```
 
-<p>これらの表示を提供するために、以下の CSS を使用します。</p>
+これらの表示を提供するために、以下の CSS を使用します。
 
-<pre class="brush: css notranslate">input + span {
+```css
+input + span {
   position: relative;
 }
 
@@ -61,68 +67,36 @@ input:invalid + span::before {
 input:valid + span::before {
   content: '✓';
   color: green;
-}</pre>
+}
+```
 
-<p>生成されたコンテンツを相対的に配置できるように <code>&lt;span&gt;</code> を <code>position: relative</code> に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。</p>
+生成されたコンテンツを相対的に配置できるように `<span>` を `position: relative` に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: We've used <code>::before</code> to add these labels, as we were already using <code>::after</code> for the "required" labels.</p>
-</div>
+> **Note:** これらのラベルを追加するために `::before` を使ったのは、すでに `::after` を "required" ラベルに使っていたからです。
 
-<p>You can try it below:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}</p>
-
-<p>Notice how the required text inputs are invalid when empty, but valid when they have something filled in. The email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email address.</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html">Understanding Success Criterion 1.4.1 | W3C WCAG 2.0 の理解</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', '#selector-valid', ':valid')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>HTML の意味論と制約検証を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}</td>
-   <td>{{Spec2('CSS4 Selectors')}}</td>
-   <td>初回定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+以下で試してみることができます。
 
-<div>
-<p>{{Compat("css.selectors.valid")}}</p>
-</div>
+{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}
+
+必須のテキスト入力は、空の状態では無効ですが、何かが記入されている状態では有効であることに注意してください。一方、 email の入力は、必須ではないため、空の場合は有効ですが、適切な email アドレスでないものが含まれている場合は無効となります。
+
+## アクセシビリティの考慮
+
+緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。
+
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連項目</h2>
+## 関連情報
 
-<ul>
- <li>他の検証関連の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}</li>
- <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
- <li>JavaScript からの <a href="/ja/docs/Web/API/ValidityState">validity state</a></li>
-</ul>
+- 他の検証関連の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}
+- [フォームデータの検証](/ja/docs/Learn/Forms/Form_validation)
+- JavaScript からの[検証状態](/ja/docs/Web/API/ValidityState)へのアクセス