From 366a93a84df26a3bc08bfd85a7d87dc7c450e2cc Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 3 Jan 2022 23:20:43 +0900
Subject: 入力擬似クラスの文書を変換準備
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
files/ja/web/css/_colon_autofill/index.html | 33 ----
files/ja/web/css/_colon_autofill/index.md | 33 ++++
files/ja/web/css/_colon_checked/index.html | 213 ---------------------
files/ja/web/css/_colon_checked/index.md | 213 +++++++++++++++++++++
files/ja/web/css/_colon_default/index.html | 108 -----------
files/ja/web/css/_colon_default/index.md | 108 +++++++++++
files/ja/web/css/_colon_disabled/index.html | 128 -------------
files/ja/web/css/_colon_disabled/index.md | 128 +++++++++++++
files/ja/web/css/_colon_enabled/index.html | 99 ----------
files/ja/web/css/_colon_enabled/index.md | 99 ++++++++++
files/ja/web/css/_colon_in-range/index.html | 114 -----------
files/ja/web/css/_colon_in-range/index.md | 114 +++++++++++
files/ja/web/css/_colon_indeterminate/index.html | 140 --------------
files/ja/web/css/_colon_indeterminate/index.md | 140 ++++++++++++++
files/ja/web/css/_colon_invalid/index.html | 152 ---------------
files/ja/web/css/_colon_invalid/index.md | 152 +++++++++++++++
files/ja/web/css/_colon_optional/index.html | 122 ------------
files/ja/web/css/_colon_optional/index.md | 122 ++++++++++++
files/ja/web/css/_colon_out-of-range/index.html | 115 -----------
files/ja/web/css/_colon_out-of-range/index.md | 115 +++++++++++
.../ja/web/css/_colon_placeholder-shown/index.html | 128 -------------
files/ja/web/css/_colon_placeholder-shown/index.md | 128 +++++++++++++
files/ja/web/css/_colon_read-only/index.html | 119 ------------
files/ja/web/css/_colon_read-only/index.md | 119 ++++++++++++
files/ja/web/css/_colon_read-write/index.html | 119 ------------
files/ja/web/css/_colon_read-write/index.md | 119 ++++++++++++
files/ja/web/css/_colon_required/index.html | 126 ------------
files/ja/web/css/_colon_required/index.md | 126 ++++++++++++
files/ja/web/css/_colon_valid/index.html | 128 -------------
files/ja/web/css/_colon_valid/index.md | 128 +++++++++++++
30 files changed, 1844 insertions(+), 1844 deletions(-)
delete mode 100644 files/ja/web/css/_colon_autofill/index.html
create mode 100644 files/ja/web/css/_colon_autofill/index.md
delete mode 100644 files/ja/web/css/_colon_checked/index.html
create mode 100644 files/ja/web/css/_colon_checked/index.md
delete mode 100644 files/ja/web/css/_colon_default/index.html
create mode 100644 files/ja/web/css/_colon_default/index.md
delete mode 100644 files/ja/web/css/_colon_disabled/index.html
create mode 100644 files/ja/web/css/_colon_disabled/index.md
delete mode 100644 files/ja/web/css/_colon_enabled/index.html
create mode 100644 files/ja/web/css/_colon_enabled/index.md
delete mode 100644 files/ja/web/css/_colon_in-range/index.html
create mode 100644 files/ja/web/css/_colon_in-range/index.md
delete mode 100644 files/ja/web/css/_colon_indeterminate/index.html
create mode 100644 files/ja/web/css/_colon_indeterminate/index.md
delete mode 100644 files/ja/web/css/_colon_invalid/index.html
create mode 100644 files/ja/web/css/_colon_invalid/index.md
delete mode 100644 files/ja/web/css/_colon_optional/index.html
create mode 100644 files/ja/web/css/_colon_optional/index.md
delete mode 100644 files/ja/web/css/_colon_out-of-range/index.html
create mode 100644 files/ja/web/css/_colon_out-of-range/index.md
delete mode 100644 files/ja/web/css/_colon_placeholder-shown/index.html
create mode 100644 files/ja/web/css/_colon_placeholder-shown/index.md
delete mode 100644 files/ja/web/css/_colon_read-only/index.html
create mode 100644 files/ja/web/css/_colon_read-only/index.md
delete mode 100644 files/ja/web/css/_colon_read-write/index.html
create mode 100644 files/ja/web/css/_colon_read-write/index.md
delete mode 100644 files/ja/web/css/_colon_required/index.html
create mode 100644 files/ja/web/css/_colon_required/index.md
delete mode 100644 files/ja/web/css/_colon_valid/index.html
create mode 100644 files/ja/web/css/_colon_valid/index.md
(limited to 'files')
diff --git a/files/ja/web/css/_colon_autofill/index.html b/files/ja/web/css/_colon_autofill/index.html
deleted file mode 100644
index 733b9665b2..0000000000
--- a/files/ja/web/css/_colon_autofill/index.html
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: ':-webkit-autofill'
-slug: Web/CSS/:autofill
-tags:
- - CSS
- - Non-standard
- - Reference
- - 擬似クラス
-translation_of: Web/CSS/:-webkit-autofill
-original_slug: Web/CSS/:-webkit-autofill
----
-<div>{{CSSRef}}{{Non-standard_header}}</div>
-
-<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p>
-
-<p class="note"><strong>メモ:</strong> 多くのブラウザーのユーザーエージェントスタイルシートでは、 <code>:-webkit-autofill</code> スタイル定義に <code>!important</code> を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<p>どの仕様書でも定義されていません。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.selectors.-webkit-autofill")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!</a></li>
- <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit bug 66032: Allow site authors to override autofilled fields' colors.</a></li>
- <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla bug 740979: implement <code>:-moz-autofill</code> pseudo-class on input elements with an autofilled value</a></li>
- <li><a href="https://wiki.csswg.org/spec/css4-ui#more-selectors">new css4-ui features - more selectors</a></li>
-</ul>
diff --git a/files/ja/web/css/_colon_autofill/index.md b/files/ja/web/css/_colon_autofill/index.md
new file mode 100644
index 0000000000..733b9665b2
--- /dev/null
+++ b/files/ja/web/css/_colon_autofill/index.md
@@ -0,0 +1,33 @@
+---
+title: ':-webkit-autofill'
+slug: Web/CSS/:autofill
+tags:
+ - CSS
+ - Non-standard
+ - Reference
+ - 擬似クラス
+translation_of: Web/CSS/:-webkit-autofill
+original_slug: Web/CSS/:-webkit-autofill
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p>CSS の <strong><code>:-webkit-autofill</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">疑似クラス</a>は、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。</p>
+
+<p class="note"><strong>メモ:</strong> 多くのブラウザーのユーザーエージェントスタイルシートでは、 <code>:-webkit-autofill</code> スタイル定義に <code>!important</code> を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>{{Compat("css.selectors.-webkit-autofill")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://code.google.com/p/chromium/issues/detail?id=46543">Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!</a></li>
+ <li><a href="https://bugs.webkit.org/show_bug.cgi?id=66032">WebKit bug 66032: Allow site authors to override autofilled fields' colors.</a></li>
+ <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=740979">Mozilla bug 740979: implement <code>:-moz-autofill</code> pseudo-class on input elements with an autofilled value</a></li>
+ <li><a href="https://wiki.csswg.org/spec/css4-ui#more-selectors">new css4-ui features - more selectors</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_checked/index.html b/files/ja/web/css/_colon_checked/index.html
deleted file mode 100644
index 9132885a57..0000000000
--- a/files/ja/web/css/_colon_checked/index.html
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: ':checked'
-slug: 'Web/CSS/:checked'
-tags:
- - ':checked'
- - CSS
- - Checked
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Toggled
- - Web
- - button
- - checkbox
- - radio
-translation_of: 'Web/CSS/:checked'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:checked</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>セレクターで、<strong>ラジオボタン</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>)、 <strong>チェックボックス</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>)、 <strong>オプションボタン</strong> ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり <code>on</code> の状態にあったりすることを表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
-:checked {
- margin-left: 25px;
- border: 1px solid blue;
-}
-</pre>
-
-<p>ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> ブラウザ―は <code><option></code> を<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>として扱うことが多いので、 <code>:checked</code> 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate"><div>
- <input type="radio" name="my-input" id="yes">
- <label for="yes">Yes</label>
-
- <input type="radio" name="my-input" id="no">
- <label for="no">No</label>
-</div>
-
-<div>
- <input type="checkbox" name="my-checkbox" id="opt-in">
- <label for="opt-in">Check me!</label>
-</div>
-
-<select name="my-select" id="fruit">
- <option value="opt1">Apples</option>
- <option value="opt2">Grapes</option>
- <option value="opt3">Pears</option>
-</select>
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">div,
-select {
- margin: 8px;
-}
-
-/* チェックが入った入力のラベル */
-input:checked + label {
- color: red;
-}
-
-/* チェックが入ったラジオボタン */
-input[type="radio"]:checked {
- box-shadow: 0 0 0 3px orange;
-}
-
-/* チェックが入ったチェックボックス */
-input[type="checkbox"]:checked {
- box-shadow: 0 0 0 3px hotpink;
-}
-
-/* 選択されたオプション */
-option:checked {
- box-shadow: 0 0 0 3px lime;
- color: red;
-}
-</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Basic_example")}}</p>
-
-<h3 id="Toggling_elements_with_a_hidden_checkbox" name="Toggling_elements_with_a_hidden_checkbox">非表示のチェックボックスの要素を切り替え</h3>
-
-<p>この例では、 <code>:checked</code> 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> はまったく使っていません。</p>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html notranslate"><input type="checkbox" id="expand-toggle" />
-
-<table>
- <thead>
- <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
- </thead>
- <tbody>
- <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
- <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
- <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
- <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
- <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
- </tbody>
-</table>
-
-<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
-</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css notranslate">/* トグルチェックボックスを隠す */
-#expand-toggle {
- display: none;
-}
-
-/* 開く要素は既定で隠す */
-.expandable {
- visibility: collapse;
- background: #ddd;
-}
-
-/* ボタンにスタイルを適用 */
-#expand-btn {
- display: inline-block;
- margin-top: 12px;
- padding: 5px 11px;
- background-color: #ff7;
- border: 1px solid;
- border-radius: 3px;
-}
-
-/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
-#expand-toggle:checked ~ * .expandable {
- visibility: visible;
-}
-
-/* チェックボックスがチェックされていたらボタンにスタイルを適用 */
-#expand-toggle:checked ~ #expand-btn {
- background-color: #ccc;
-}</pre>
-
-<h4 id="Result_2" name="Result_2">結果</h4>
-
-<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
-
-<h3 id="Image_gallery" name="Image_gallery">画像ギャラリー</h3>
-
-<p><code>:checked</code> 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるには<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">このデモ</a>を参照してください。</p>
-
-<div class="note"><strong>メモ:</strong> 似たような効果で、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> 擬似クラスを使用して隠しラジオボタンを使わないものについては、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover">:hover</a> のリファレンスページからの<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">このデモ</a>を参照してください。</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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
- <td>{{ Spec2('HTML WHATWG') }}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
- <td>{{ Spec2('HTML5 W3C') }}</td>
- <td>HTML に関する意味を定義。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
- <td>{{ Spec2('CSS4 Selectors') }}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
- <td>{{ Spec2('CSS3 Selectors') }}</td>
- <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.checked")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
- <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
- <li>関連する HTML 要素: <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{HTMLElement("select")}}, {{HTMLElement("option")}}</li>
- <li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li>
-</ul>
-</div>
diff --git a/files/ja/web/css/_colon_checked/index.md b/files/ja/web/css/_colon_checked/index.md
new file mode 100644
index 0000000000..9132885a57
--- /dev/null
+++ b/files/ja/web/css/_colon_checked/index.md
@@ -0,0 +1,213 @@
+---
+title: ':checked'
+slug: 'Web/CSS/:checked'
+tags:
+ - ':checked'
+ - CSS
+ - Checked
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Toggled
+ - Web
+ - button
+ - checkbox
+ - radio
+translation_of: 'Web/CSS/:checked'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:checked</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>セレクターで、<strong>ラジオボタン</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>)、 <strong>チェックボックス</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>)、 <strong>オプションボタン</strong> ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり <code>on</code> の状態にあったりすることを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
+:checked {
+ margin-left: 25px;
+ border: 1px solid blue;
+}
+</pre>
+
+<p>ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> ブラウザ―は <code><option></code> を<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>として扱うことが多いので、 <code>:checked</code> 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate"><div>
+ <input type="radio" name="my-input" id="yes">
+ <label for="yes">Yes</label>
+
+ <input type="radio" name="my-input" id="no">
+ <label for="no">No</label>
+</div>
+
+<div>
+ <input type="checkbox" name="my-checkbox" id="opt-in">
+ <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+ <option value="opt1">Apples</option>
+ <option value="opt2">Grapes</option>
+ <option value="opt3">Pears</option>
+</select>
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div,
+select {
+ margin: 8px;
+}
+
+/* チェックが入った入力のラベル */
+input:checked + label {
+ color: red;
+}
+
+/* チェックが入ったラジオボタン */
+input[type="radio"]:checked {
+ box-shadow: 0 0 0 3px orange;
+}
+
+/* チェックが入ったチェックボックス */
+input[type="checkbox"]:checked {
+ box-shadow: 0 0 0 3px hotpink;
+}
+
+/* 選択されたオプション */
+option:checked {
+ box-shadow: 0 0 0 3px lime;
+ color: red;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example")}}</p>
+
+<h3 id="Toggling_elements_with_a_hidden_checkbox" name="Toggling_elements_with_a_hidden_checkbox">非表示のチェックボックスの要素を切り替え</h3>
+
+<p>この例では、 <code>:checked</code> 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> はまったく使っていません。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate"><input type="checkbox" id="expand-toggle" />
+
+<table>
+ <thead>
+ <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
+ </thead>
+ <tbody>
+ <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+ <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+ <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+ <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+ <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+ </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/* トグルチェックボックスを隠す */
+#expand-toggle {
+ display: none;
+}
+
+/* 開く要素は既定で隠す */
+.expandable {
+ visibility: collapse;
+ background: #ddd;
+}
+
+/* ボタンにスタイルを適用 */
+#expand-btn {
+ display: inline-block;
+ margin-top: 12px;
+ padding: 5px 11px;
+ background-color: #ff7;
+ border: 1px solid;
+ border-radius: 3px;
+}
+
+/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
+#expand-toggle:checked ~ * .expandable {
+ visibility: visible;
+}
+
+/* チェックボックスがチェックされていたらボタンにスタイルを適用 */
+#expand-toggle:checked ~ #expand-btn {
+ background-color: #ccc;
+}</pre>
+
+<h4 id="Result_2" name="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
+
+<h3 id="Image_gallery" name="Image_gallery">画像ギャラリー</h3>
+
+<p><code>:checked</code> 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるには<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">このデモ</a>を参照してください。</p>
+
+<div class="note"><strong>メモ:</strong> 似たような効果で、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> 擬似クラスを使用して隠しラジオボタンを使わないものについては、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover">:hover</a> のリファレンスページからの<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">このデモ</a>を参照してください。</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('HTML WHATWG', '#selector-checked', ':checked') }}</td>
+ <td>{{ Spec2('HTML WHATWG') }}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
+ <td>{{ Spec2('HTML5 W3C') }}</td>
+ <td>HTML に関する意味を定義。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
+ <td>{{ Spec2('CSS4 Selectors') }}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
+ <td>{{ Spec2('CSS3 Selectors') }}</td>
+ <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("css.selectors.checked")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
+ <li>関連する HTML 要素: <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{HTMLElement("select")}}, {{HTMLElement("option")}}</li>
+ <li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_default/index.html b/files/ja/web/css/_colon_default/index.html
deleted file mode 100644
index 648dff2dc9..0000000000
--- a/files/ja/web/css/_colon_default/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: ':default'
-slug: 'Web/CSS/:default'
-tags:
- - CSS
- - CSS 基本ユーザーインターフェイス
- - Layout
- - Pseudo-class
- - Reference
- - Web
- - セレクター
- - 疑似クラス
-translation_of: 'Web/CSS/:default'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:default</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。</p>
-
-<p>このセレクターが何に一致するかについては、 <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">HTML Standard §4.16.3 Pseudo-classes</a> で定義されています。 — {{htmlelement("button")}}、 <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>、 <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>、 {{htmlelement("option")}} 要素に一致させることができます。</p>
-
-<ul>
- <li>既定の option 要素は <code>selected</code> 属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。 <code>multiple</code> が付いた {{htmlelement("select")}} は、複数の <code>selected</code> がついた選択肢を持つことができますので、すべてが <code>:default</code> に一致します。</li>
- <li><code><input type="checkbox"></code> と <code><input type="radio"></code> は <code>checked</code> 属性があるときに一致します。</li>
- <li>{{htmlelement("button")}} は {{htmlelement("form")}} の <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission">既定の送信ボタン</a>である場合に一致します。フォームに所属する <code><button></code> のうち、 DOM 順で最初のものです。これはフォームを送信する {{htmlelement("input")}} 型、例えば <code>image</code> または <code>submit</code> にも適用されます。</li>
-</ul>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate"><fieldset>
- <legend>Favorite season</legend>
-
- <input type="radio" name="season" id="spring">
- <label for="spring">Spring</label>
-
- <input type="radio" name="season" id="summer" checked>
- <label for="summer">Summer</label>
-
- <input type="radio" name="season" id="fall">
- <label for="fall">Fall</label>
-
- <input type="radio" name="season" id="winter">
- <label for="winter">Winter</label>
-</fieldset>
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">input:default {
- box-shadow: 0 0 2px 1px coral;
-}
-
-input:default + label {
- color: coral;
-}
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Examples")}}</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('HTML WHATWG', '#selector-default', ':default')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td>HTML に関する意味付けと制約検証を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>変更なし。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.default")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
- <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームのスタイル付け</a></li>
- <li>関連する HTML 要素: {{htmlelement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{htmlelement("option")}}</li>
-</ul>
-</div>
diff --git a/files/ja/web/css/_colon_default/index.md b/files/ja/web/css/_colon_default/index.md
new file mode 100644
index 0000000000..648dff2dc9
--- /dev/null
+++ b/files/ja/web/css/_colon_default/index.md
@@ -0,0 +1,108 @@
+---
+title: ':default'
+slug: 'Web/CSS/:default'
+tags:
+ - CSS
+ - CSS 基本ユーザーインターフェイス
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Web
+ - セレクター
+ - 疑似クラス
+translation_of: 'Web/CSS/:default'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:default</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。</p>
+
+<p>このセレクターが何に一致するかについては、 <a href="https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default">HTML Standard §4.16.3 Pseudo-classes</a> で定義されています。 — {{htmlelement("button")}}、 <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>、 <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>、 {{htmlelement("option")}} 要素に一致させることができます。</p>
+
+<ul>
+ <li>既定の option 要素は <code>selected</code> 属性が付いた最初のもの、または DOM 順で最初の有効な選択肢です。 <code>multiple</code> が付いた {{htmlelement("select")}} は、複数の <code>selected</code> がついた選択肢を持つことができますので、すべてが <code>:default</code> に一致します。</li>
+ <li><code><input type="checkbox"></code> と <code><input type="radio"></code> は <code>checked</code> 属性があるときに一致します。</li>
+ <li>{{htmlelement("button")}} は {{htmlelement("form")}} の <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission">既定の送信ボタン</a>である場合に一致します。フォームに所属する <code><button></code> のうち、 DOM 順で最初のものです。これはフォームを送信する {{htmlelement("input")}} 型、例えば <code>image</code> または <code>submit</code> にも適用されます。</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><fieldset>
+ <legend>Favorite season</legend>
+
+ <input type="radio" name="season" id="spring">
+ <label for="spring">Spring</label>
+
+ <input type="radio" name="season" id="summer" checked>
+ <label for="summer">Summer</label>
+
+ <input type="radio" name="season" id="fall">
+ <label for="fall">Fall</label>
+
+ <input type="radio" name="season" id="winter">
+ <label for="winter">Winter</label>
+</fieldset>
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input:default {
+ box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+ color: coral;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples")}}</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('HTML WHATWG', '#selector-default', ':default')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', '#selector-default', ':default')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>HTML に関する意味付けと制約検証を定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("css.selectors.default")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームのスタイル付け</a></li>
+ <li>関連する HTML 要素: {{htmlelement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{htmlelement("option")}}</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_disabled/index.html b/files/ja/web/css/_colon_disabled/index.html
deleted file mode 100644
index a6874c05a9..0000000000
--- a/files/ja/web/css/_colon_disabled/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: ':disabled'
-slug: 'Web/CSS/:disabled'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Web
-translation_of: 'Web/CSS/:disabled'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:disabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 無効な <input> を選択 */
-input:disabled {
- background: #ccc;
-}</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>この例は基本的な送り先フォームを表示します。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate"><form action="#">
- <fieldset id="shipping">
- <legend>送り先</legend>
- <input type="text" placeholder="名前">
- <input type="text" placeholder="住所">
- <input type="text" placeholder="郵便番号">
- </fieldset>
- <br>
- <fieldset id="billing">
- <legend>請求先</legend>
- <label for="billing_is_shipping">送り先と同じ:</label>
- <input type="checkbox" id="billing-checkbox" checked>
- <br>
- <input type="text" placeholder="名前" disabled>
- <input type="text" placeholder="住所" disabled>
- <input type="text" placeholder="郵便番号" disabled>
- </fieldset>
-</form>
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">input[type="text"]:disabled {
- background: #ccc;
-}
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js notranslate">// ページの読み込みの終了を待つ
-document.addEventListener('DOMContentLoaded', function () {
- // チェックボックスに 'change' イベントリスナーを追加
- document.getElementById('billing-checkbox').onchange = toggleBilling;
-}, false);
-
-function toggleBilling() {
- // 請求先のテキストフィールドを選択
- var billingItems = document.querySelectorAll('#billing input[type="text"]');
-
- // 請求先テキストフィールドを切り替え
- for (var i = 0; i < billingItems.length; i++) {
- billingItems[i].disabled = !billingItems[i].disabled;
- }
-}
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Examples', 300, 250)}}</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td>HTML に関する意味を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
- <td>{{Spec2('CSS3 Selectors')}}</td>
- <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.disabled")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>
- <p>{{Cssxref(":enabled")}}</p>
- </li>
-</ul>
diff --git a/files/ja/web/css/_colon_disabled/index.md b/files/ja/web/css/_colon_disabled/index.md
new file mode 100644
index 0000000000..a6874c05a9
--- /dev/null
+++ b/files/ja/web/css/_colon_disabled/index.md
@@ -0,0 +1,128 @@
+---
+title: ':disabled'
+slug: 'Web/CSS/:disabled'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Web
+translation_of: 'Web/CSS/:disabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:disabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 無効な <input> を選択 */
+input:disabled {
+ background: #ccc;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は基本的な送り先フォームを表示します。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><form action="#">
+ <fieldset id="shipping">
+ <legend>送り先</legend>
+ <input type="text" placeholder="名前">
+ <input type="text" placeholder="住所">
+ <input type="text" placeholder="郵便番号">
+ </fieldset>
+ <br>
+ <fieldset id="billing">
+ <legend>請求先</legend>
+ <label for="billing_is_shipping">送り先と同じ:</label>
+ <input type="checkbox" id="billing-checkbox" checked>
+ <br>
+ <input type="text" placeholder="名前" disabled>
+ <input type="text" placeholder="住所" disabled>
+ <input type="text" placeholder="郵便番号" disabled>
+ </fieldset>
+</form>
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">input[type="text"]:disabled {
+ background: #ccc;
+}
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">// ページの読み込みの終了を待つ
+document.addEventListener('DOMContentLoaded', function () {
+ // チェックボックスに 'change' イベントリスナーを追加
+ document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+ // 請求先のテキストフィールドを選択
+ var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+ // 請求先テキストフィールドを切り替え
+ for (var i = 0; i < billingItems.length; i++) {
+ billingItems[i].disabled = !billingItems[i].disabled;
+ }
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 300, 250)}}</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('HTML WHATWG', '#selector-disabled', ':disabled')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>HTML に関する意味を定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td>
+ <td>{{Spec2('CSS3 Selectors')}}</td>
+ <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("css.selectors.disabled")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>
+ <p>{{Cssxref(":enabled")}}</p>
+ </li>
+</ul>
diff --git a/files/ja/web/css/_colon_enabled/index.html b/files/ja/web/css/_colon_enabled/index.html
deleted file mode 100644
index cfdea7d649..0000000000
--- a/files/ja/web/css/_colon_enabled/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: ':enabled'
-slug: 'Web/CSS/:enabled'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Web
-translation_of: 'Web/CSS/:enabled'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:enabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 有効な <input> を選択 */
-input:enabled {
- color: blue;
-}</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush:html notranslate"><form action="url_of_form">
- <label for="FirstField">First field (enabled):</label>
- <input type="text" id="FirstField" value="Lorem"><br>
-
- <label for="SecondField">Second field (disabled):</label>
- <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
-
- <input type="button" value="Submit">
-</form></pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush:css; notranslate">input:enabled {
- color: #2b2;
-}
-
-input:disabled {
- color: #aaa;
-}
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Examples", 550, 95)}}</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td>HTML に関する意味を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
- <td>{{Spec2('CSS3 Selectors')}}</td>
- <td>擬似クラスを定義。ただし意味の結びつけの定義はなし。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.enabled")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{Cssxref(":disabled")}}</li>
-</ul>
diff --git a/files/ja/web/css/_colon_enabled/index.md b/files/ja/web/css/_colon_enabled/index.md
new file mode 100644
index 0000000000..cfdea7d649
--- /dev/null
+++ b/files/ja/web/css/_colon_enabled/index.md
@@ -0,0 +1,99 @@
+---
+title: ':enabled'
+slug: 'Web/CSS/:enabled'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Web
+translation_of: 'Web/CSS/:enabled'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:enabled</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 有効な <input> を選択 */
+input:enabled {
+ color: blue;
+}</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html notranslate"><form action="url_of_form">
+ <label for="FirstField">First field (enabled):</label>
+ <input type="text" id="FirstField" value="Lorem"><br>
+
+ <label for="SecondField">Second field (disabled):</label>
+ <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+ <input type="button" value="Submit">
+</form></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; notranslate">input:enabled {
+ color: #2b2;
+}
+
+input:disabled {
+ color: #aaa;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", 550, 95)}}</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('HTML WHATWG', '#selector-enabled', ':enabled')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>HTML に関する意味を定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}</td>
+ <td>{{Spec2('CSS3 Selectors')}}</td>
+ <td>擬似クラスを定義。ただし意味の結びつけの定義はなし。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.selectors.enabled")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{Cssxref(":disabled")}}</li>
+</ul>
diff --git a/files/ja/web/css/_colon_in-range/index.html b/files/ja/web/css/_colon_in-range/index.html
deleted file mode 100644
index c2be314e50..0000000000
--- a/files/ja/web/css/_colon_in-range/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: ':in-range'
-slug: 'Web/CSS/:in-range'
-tags:
- - CSS
- - Reference
- - Web
- - セレクター
- - 疑似クラス
-translation_of: 'Web/CSS/:in-range'
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:in-range</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性による制限範囲内にある {{htmlelement("input")}} 要素を表します。</p>
-
-<pre class="brush: css no-line-numbers">/* 入力範囲が設定されていて、値がその範囲に該当する
- <input> 要素をすべて選択 */
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}</pre>
-
-<p>この疑似クラスは。入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
-
-<div class="note"><strong>Note:</strong> この疑似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Example" name="Example">例</h2>
-
-<div id="example">
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html"><form action="" id="form1">
- <ul>1から10の間の値が有効です。
- <li>
- <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
- <label for="value1">あなたの値は</label>
- </li>
- </ul>
-</form></pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css;">li {
- list-style: none;
- margin-bottom: 1em;
-}
-
-input {
- border: 1px solid black;
-}
-
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}
-
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
- border: 2px solid red;
-}
-
-input:in-range + label::after {
- content: '範囲内です。';
-}
-
-input:out-of-range + label::after {
- content: '範囲外です！';
-}</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-</div>
-
-<div>{{EmbedLiveSample('Example', 600, 140)}}</div>
-
-<h2 id="Specifications" name="Specifications"><span>仕様書</span></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-in-range', ':in-range')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>いつ HTML が <code>:in-range</code> に該当するかを定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>初回定義。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<div>
-<div>
-<p>{{Compat("css.selectors.in-range")}}</p>
-</div>
-</div>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>{{cssxref(":out-of-range")}}</li>
- <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
-</ul>
diff --git a/files/ja/web/css/_colon_in-range/index.md b/files/ja/web/css/_colon_in-range/index.md
new file mode 100644
index 0000000000..c2be314e50
--- /dev/null
+++ b/files/ja/web/css/_colon_in-range/index.md
@@ -0,0 +1,114 @@
+---
+title: ':in-range'
+slug: 'Web/CSS/:in-range'
+tags:
+ - CSS
+ - Reference
+ - Web
+ - セレクター
+ - 疑似クラス
+translation_of: 'Web/CSS/:in-range'
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:in-range</code></strong> <a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">疑似クラス</a>は、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性による制限範囲内にある {{htmlelement("input")}} 要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* 入力範囲が設定されていて、値がその範囲に該当する
+ <input> 要素をすべて選択 */
+input:in-range {
+ background-color: rgba(0, 255, 0, 0.25);
+}</pre>
+
+<p>この疑似クラスは。入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
+
+<div class="note"><strong>Note:</strong> この疑似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Example" name="Example">例</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><form action="" id="form1">
+ <ul>1から10の間の値が有効です。
+ <li>
+ <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+ <label for="value1">あなたの値は</label>
+ </li>
+ </ul>
+</form></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">li {
+ list-style: none;
+ margin-bottom: 1em;
+}
+
+input {
+ border: 1px solid black;
+}
+
+input:in-range {
+ background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+ background-color: rgba(255, 0, 0, 0.25);
+ border: 2px solid red;
+}
+
+input:in-range + label::after {
+ content: '範囲内です。';
+}
+
+input:out-of-range + label::after {
+ content: '範囲外です！';
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+</div>
+
+<div>{{EmbedLiveSample('Example', 600, 140)}}</div>
+
+<h2 id="Specifications" name="Specifications"><span>仕様書</span></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-in-range', ':in-range')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>いつ HTML が <code>:in-range</code> に該当するかを定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>初回定義。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+<div>
+<p>{{Compat("css.selectors.in-range")}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{cssxref(":out-of-range")}}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_indeterminate/index.html b/files/ja/web/css/_colon_indeterminate/index.html
deleted file mode 100644
index e2721b89a7..0000000000
--- a/files/ja/web/css/_colon_indeterminate/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: ':indeterminate'
-slug: 'Web/CSS/:indeterminate'
-tags:
- - ':indeterminate'
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Web
- - checkbox
- - progress
- - radio button
-translation_of: 'Web/CSS/:indeterminate'
----
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary"><strong><code>:indeterminate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>セレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性が <code>true</code> に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。</span></p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 中間の状態にある <input> をすべて選択 */
-input:indeterminate {
- background: lime;
-}</pre>
-
-<p>このセレクターが対象とする要素は以下の通りです。</p>
-
-<ul>
- <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素で、<a href="/ja/docs/Web/JavaScript">JavaScript</a> によって <code>indeterminate</code> プロパティが <code>true</code> に設定されている場合</li>
- <li><code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> 要素で、フォーム内の同じ <code>name</code> の値を持つすべてのラジオボタンが未選択である場合</li>
- <li>{{HTMLElement("progress")}} 要素で、中間の状態の場合</li>
-</ul>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Checkbox_radio_button" name="Checkbox_radio_button">チェックボックスとラジオボタン</h3>
-
-<p>この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate"><div>
- <input type="checkbox" id="checkbox">
- <label for="checkbox">背景が緑色になるはずです</label>
-</div>
-<div>
- <input type="radio" id="radio">
- <label for="radio">背景が緑色になるはずです</label>
-</div></pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css; hightlight[5] notranslate">input:indeterminate + label {
- background: lime;
-}
-</pre>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js notranslate">var inputs = document.getElementsByTagName("input");
-
-for (var i = 0; i < inputs.length; i++) {
- inputs[i].indeterminate = true;
-}
-</pre>
-
-<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
-
-<h3 id="Progress_bar" name="Progress_bar">プログレスバー</h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html notranslate"><progress>
-</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css; hightlight[5] notranslate">progress {
- margin: 4px;
-}
-
-progress:indeterminate {
- opacity: 0.5;
- background-color: lightgray;
- box-shadow: 0 0 2px 1px red;
-}
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</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('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td>HTML における意味論と制約検証の定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>変更なし。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.indeterminate")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
- <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
- <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性</li>
- <li>{{HTMLElement("input")}} およびそれを実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
- <li>{{cssxref(":checked")}} セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます</li>
-</ul>
-</div>
diff --git a/files/ja/web/css/_colon_indeterminate/index.md b/files/ja/web/css/_colon_indeterminate/index.md
new file mode 100644
index 0000000000..e2721b89a7
--- /dev/null
+++ b/files/ja/web/css/_colon_indeterminate/index.md
@@ -0,0 +1,140 @@
+---
+title: ':indeterminate'
+slug: 'Web/CSS/:indeterminate'
+tags:
+ - ':indeterminate'
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Web
+ - checkbox
+ - progress
+ - radio button
+translation_of: 'Web/CSS/:indeterminate'
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>:indeterminate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>セレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性が <code>true</code> に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。</span></p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 中間の状態にある <input> をすべて選択 */
+input:indeterminate {
+ background: lime;
+}</pre>
+
+<p>このセレクターが対象とする要素は以下の通りです。</p>
+
+<ul>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素で、<a href="/ja/docs/Web/JavaScript">JavaScript</a> によって <code>indeterminate</code> プロパティが <code>true</code> に設定されている場合</li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> 要素で、フォーム内の同じ <code>name</code> の値を持つすべてのラジオボタンが未選択である場合</li>
+ <li>{{HTMLElement("progress")}} 要素で、中間の状態の場合</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Checkbox_radio_button" name="Checkbox_radio_button">チェックボックスとラジオボタン</h3>
+
+<p>この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate"><div>
+ <input type="checkbox" id="checkbox">
+ <label for="checkbox">背景が緑色になるはずです</label>
+</div>
+<div>
+ <input type="radio" id="radio">
+ <label for="radio">背景が緑色になるはずです</label>
+</div></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css; hightlight[5] notranslate">input:indeterminate + label {
+ background: lime;
+}
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js notranslate">var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+ inputs[i].indeterminate = true;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
+
+<h3 id="Progress_bar" name="Progress_bar">プログレスバー</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate"><progress>
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css; hightlight[5] notranslate">progress {
+ margin: 4px;
+}
+
+progress:indeterminate {
+ opacity: 0.5;
+ background-color: lightgray;
+ box-shadow: 0 0 2px 1px red;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</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('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>HTML における意味論と制約検証の定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("css.selectors.indeterminate")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
+ <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
+ <li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性</li>
+ <li>{{HTMLElement("input")}} およびそれを実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
+ <li>{{cssxref(":checked")}} セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます</li>
+</ul>
+</div>
diff --git a/files/ja/web/css/_colon_invalid/index.html b/files/ja/web/css/_colon_invalid/index.html
deleted file mode 100644
index 57c48a21b9..0000000000
--- a/files/ja/web/css/_colon_invalid/index.html
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: ':invalid'
-slug: 'Web/CSS/:invalid'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Web
- - セレクター
- - 擬似クラス
-translation_of: 'Web/CSS/:invalid'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:invalid</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a>に失敗したものを表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 無効な <input> を選択 */
-input:invalid {
- background-color: pink;
-}</pre>
-
-<p>この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate"><form>
- <div class="field">
- <label for="url_input">URL を入力して下さい:</label>
- <input type="url" id="url_input">
- </div>
-
- <div class="field">
- <label for="email_input">メールアドレスを入力して下さい:</label>
- <input type="email" id="email_input" required>
- </div>
-</form></pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">label {
- display: block;
- margin: 1px;
- padding: 1px;
-}
-
-.field {
- margin: 1px;
- padding: 1px;
-}
-
-input:invalid {
- background-color: #ffdddd;
-}
-
-form:invalid {
- border: 5px solid #ffdddd;
-}
-
-input:valid {
- background-color: #ddffdd;
-}
-
-form:valid {
- border: 5px solid #ddffdd;
-}
-
-input:required {
- border-color: #800000;
- border-width: 3px;
-}
-
-input:required:invalid {
- border-color: #c00000;
-}
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Examples', 600, 120)}}</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="Notes" name="Notes">注</h2>
-
-<h3 id="Radio_buttons" name="Radio_buttons">ラジオボタン</h3>
-
-<p>グループのラジオボタンの1つがs <code>required</code> の場合、 <code>:invalid</code> 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ <code>name</code> 属性を共有しています。）</p>
-
-<h3 id="Gecko_defaults" name="Gecko_defaults">Gecko の既定値</h3>
-
-<p>既定で Gecko は <code>:invalid</code> 擬似クラスのスタイルを適用しません。しかし、 <code>:invalid</code> の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。</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('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
- <td>{{Spec2('HTML5 W3C')}}</td>
- <td>HTML の意味論と制約検証を定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>初回定義。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.invalid")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>検証に関する他の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
- <li>関連する Mozilla の擬似クラス: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-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>
diff --git a/files/ja/web/css/_colon_invalid/index.md b/files/ja/web/css/_colon_invalid/index.md
new file mode 100644
index 0000000000..57c48a21b9
--- /dev/null
+++ b/files/ja/web/css/_colon_invalid/index.md
@@ -0,0 +1,152 @@
+---
+title: ':invalid'
+slug: 'Web/CSS/:invalid'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Web
+ - セレクター
+ - 擬似クラス
+translation_of: 'Web/CSS/:invalid'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:invalid</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a>に失敗したものを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 無効な <input> を選択 */
+input:invalid {
+ background-color: pink;
+}</pre>
+
+<p>この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><form>
+ <div class="field">
+ <label for="url_input">URL を入力して下さい:</label>
+ <input type="url" id="url_input">
+ </div>
+
+ <div class="field">
+ <label for="email_input">メールアドレスを入力して下さい:</label>
+ <input type="email" id="email_input" required>
+ </div>
+</form></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">label {
+ display: block;
+ margin: 1px;
+ padding: 1px;
+}
+
+.field {
+ margin: 1px;
+ padding: 1px;
+}
+
+input:invalid {
+ background-color: #ffdddd;
+}
+
+form:invalid {
+ border: 5px solid #ffdddd;
+}
+
+input:valid {
+ background-color: #ddffdd;
+}
+
+form:valid {
+ border: 5px solid #ddffdd;
+}
+
+input:required {
+ border-color: #800000;
+ border-width: 3px;
+}
+
+input:required:invalid {
+ border-color: #c00000;
+}
+</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 600, 120)}}</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="Notes" name="Notes">注</h2>
+
+<h3 id="Radio_buttons" name="Radio_buttons">ラジオボタン</h3>
+
+<p>グループのラジオボタンの1つがs <code>required</code> の場合、 <code>:invalid</code> 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ <code>name</code> 属性を共有しています。）</p>
+
+<h3 id="Gecko_defaults" name="Gecko_defaults">Gecko の既定値</h3>
+
+<p>既定で Gecko は <code>:invalid</code> 擬似クラスのスタイルを適用しません。しかし、 <code>:invalid</code> の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。</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('HTML WHATWG', '#selector-invalid', ':invalid')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>HTML の意味論と制約検証を定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>初回定義。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("css.selectors.invalid")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>検証に関する他の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }}</li>
+ <li>関連する Mozilla の擬似クラス: {{cssxref(":-moz-ui-invalid")}}, {{cssxref(":-moz-submit-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>
diff --git a/files/ja/web/css/_colon_optional/index.html b/files/ja/web/css/_colon_optional/index.html
deleted file mode 100644
index 038aab28f9..0000000000
--- a/files/ja/web/css/_colon_optional/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: ':optional'
-slug: 'Web/CSS/:optional'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Web
-translation_of: 'Web/CSS/:optional'
----
-<div>{{ CSSRef }}</div>
-
-<p><strong><code>:optional</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 {{ htmlattrxref("required", "input") }} 属性が設定されていない {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素を表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 任意の <input> をすべて選択 */
-input:optional {
- border: 1px dashed black;
-}</pre>
-
-<p>この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。</p>
-
-<div class="note">
-<p><strong>注:</strong> {{cssxref(":required")}} 擬似クラスは<em>必須</em>のフォーム欄を選択します。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="The_optional_field_has_a_purple_border" name="The_optional_field_has_a_purple_border">オプションのフィールドの枠を紫にする</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate"><form>
- <div class="field">
- <label for="url_input">Enter a URL:</label>
- <input type="url" id="url_input">
- </div>
-
- <div class="field">
- <label for="email_input">Enter an email address:</label>
- <input type="email" id="email_input" required>
- </div>
-</form></pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">label {
- display: block;
- margin: 1px;
- padding: 1px;
-}
-
-.field {
- margin: 1px;
- padding: 1px;
-}
-
-input:optional {
- border-color: rebeccapurple;
- border-width: 3px;
-}
-</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
-
-<p><a href="/ja/docs/Web/HTML/Element/form">フォーム</a>に必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。</p>
-
-<p>必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN WCAG を理解する ― ガイドライン 3.3 の解説</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html">Understanding Success Criterion 3.3.2 | W3C Understanding 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-optional', ':optional') }}</td>
- <td>{{ Spec2('HTML WHATWG') }}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td>
- <td>{{ Spec2('HTML5 W3C') }}</td>
- <td>HTML の意味論と制約検証を定義。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td>
- <td>{{ Spec2('CSS4 Selectors') }}</td>
- <td>変更なし。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.optional")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>他の検証関連の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
- <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
-</ul>
diff --git a/files/ja/web/css/_colon_optional/index.md b/files/ja/web/css/_colon_optional/index.md
new file mode 100644
index 0000000000..038aab28f9
--- /dev/null
+++ b/files/ja/web/css/_colon_optional/index.md
@@ -0,0 +1,122 @@
+---
+title: ':optional'
+slug: 'Web/CSS/:optional'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Web
+translation_of: 'Web/CSS/:optional'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>:optional</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 {{ htmlattrxref("required", "input") }} 属性が設定されていない {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 任意の <input> をすべて選択 */
+input:optional {
+ border: 1px dashed black;
+}</pre>
+
+<p>この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref(":required")}} 擬似クラスは<em>必須</em>のフォーム欄を選択します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="The_optional_field_has_a_purple_border" name="The_optional_field_has_a_purple_border">オプションのフィールドの枠を紫にする</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate"><form>
+ <div class="field">
+ <label for="url_input">Enter a URL:</label>
+ <input type="url" id="url_input">
+ </div>
+
+ <div class="field">
+ <label for="email_input">Enter an email address:</label>
+ <input type="email" id="email_input" required>
+ </div>
+</form></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">label {
+ display: block;
+ margin: 1px;
+ padding: 1px;
+}
+
+.field {
+ margin: 1px;
+ padding: 1px;
+}
+
+input:optional {
+ border-color: rebeccapurple;
+ border-width: 3px;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p><a href="/ja/docs/Web/HTML/Element/form">フォーム</a>に必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。</p>
+
+<p>必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN WCAG を理解する ― ガイドライン 3.3 の解説</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html">Understanding Success Criterion 3.3.2 | W3C Understanding 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-optional', ':optional') }}</td>
+ <td>{{ Spec2('HTML WHATWG') }}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}</td>
+ <td>{{ Spec2('HTML5 W3C') }}</td>
+ <td>HTML の意味論と制約検証を定義。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}</td>
+ <td>{{ Spec2('CSS4 Selectors') }}</td>
+ <td>変更なし。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.selectors.optional")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>他の検証関連の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_out-of-range/index.html b/files/ja/web/css/_colon_out-of-range/index.html
deleted file mode 100644
index 97283014ea..0000000000
--- a/files/ja/web/css/_colon_out-of-range/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: ':out-of-range'
-slug: 'Web/CSS/:out-of-range'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Selectors
- - UI Selector
-translation_of: 'Web/CSS/:out-of-range'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:out-of-range</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{htmlelement("input")}} 要素のうち、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性で指定された範囲を外れているものを表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 入力範囲が設定されていて、値がその範囲外である
- <input> 要素をすべて選択 */
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
-}</pre>
-
-<p>この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。</p>
-
-<div class="note"><strong>注:</strong> この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<div id="example">
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate"><form action="" id="form1">
- <p>1から10の間の値が有効です。</p>
- <ul>
- <li>
- <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
- <label for="value1">あなたの値は</label>
- </li>
- </ul>
-</form></pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css; notranslate">li {
- list-style: none;
- margin-bottom: 1em;
-}
-
-input {
- border: 1px solid black;
-}
-
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}
-
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
- border: 2px solid red;
-}
-
-input:in-range + label::after {
- content: '範囲内です。';
-}
-
-input:out-of-range + label::after {
- content: '範囲外です！';
-}</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-</div>
-
-<div>{{EmbedLiveSample('Examples', 600, 140)}}</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('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>いつ HTML が <code>:out-of-range</code> に該当するかを定義。</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("css.selectors.out-of-range")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref(":in-range")}}</li>
- <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検査</a></li>
-</ul>
diff --git a/files/ja/web/css/_colon_out-of-range/index.md b/files/ja/web/css/_colon_out-of-range/index.md
new file mode 100644
index 0000000000..97283014ea
--- /dev/null
+++ b/files/ja/web/css/_colon_out-of-range/index.md
@@ -0,0 +1,115 @@
+---
+title: ':out-of-range'
+slug: 'Web/CSS/:out-of-range'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Selectors
+ - UI Selector
+translation_of: 'Web/CSS/:out-of-range'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:out-of-range</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、 {{htmlelement("input")}} 要素のうち、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性で指定された範囲を外れているものを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 入力範囲が設定されていて、値がその範囲外である
+ <input> 要素をすべて選択 */
+input:out-of-range {
+ background-color: rgba(255, 0, 0, 0.25);
+}</pre>
+
+<p>この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。</p>
+
+<div class="note"><strong>注:</strong> この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<div id="example">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate"><form action="" id="form1">
+ <p>1から10の間の値が有効です。</p>
+ <ul>
+ <li>
+ <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+ <label for="value1">あなたの値は</label>
+ </li>
+ </ul>
+</form></pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; notranslate">li {
+ list-style: none;
+ margin-bottom: 1em;
+}
+
+input {
+ border: 1px solid black;
+}
+
+input:in-range {
+ background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+ background-color: rgba(255, 0, 0, 0.25);
+ border: 2px solid red;
+}
+
+input:in-range + label::after {
+ content: '範囲内です。';
+}
+
+input:out-of-range + label::after {
+ content: '範囲外です！';
+}</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+</div>
+
+<div>{{EmbedLiveSample('Examples', 600, 140)}}</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('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>いつ HTML が <code>:out-of-range</code> に該当するかを定義。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}</td>
+ <td>{{Spec2('CSS4 Selectors')}}</td>
+ <td>初回定義</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("css.selectors.out-of-range")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":in-range")}}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検査</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_placeholder-shown/index.html b/files/ja/web/css/_colon_placeholder-shown/index.html
deleted file mode 100644
index 835fb611af..0000000000
--- a/files/ja/web/css/_colon_placeholder-shown/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: ':placeholder-shown'
-slug: Web/CSS/:placeholder-shown
-tags:
- - ':placeholder-shown'
- - CSS
- - Pseudo-class
- - Reference
- - Selector
- - セレクター
- - 擬似クラス
-browser-compat: css.selectors.placeholder-shown
-translation_of: Web/CSS/:placeholder-shown
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:placeholder-shown</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、<a href="/ja/docs/Web/HTML/Element/input#attr-placeholder">プレイスホルダー文字列</a>が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。</p>
-
-<pre class="brush: css no-line-numbers">/* プレイスホルダーが有効な要素を選択 */
-:placeholder-shown {
- border: 2px solid silver;
-}</pre>
-
-<h2 id="Syntax">構文</h2>
-
-{{CSSSyntax}}
-
-<h2 id="Example">例</h2>
-
-<h3 id="Basic_example">基本的な例</h3>
-
-<p>この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html"><input placeholder="何か入力してください！"></pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">input {
- border: 1px solid black;
- padding: 3px;
-}
-
-input:placeholder-shown {
- border-color: teal;
- color: purple;
- font-style: italic;
-}</pre>
-
-<h4 id="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Basic_example", 200, 80)}}</p>
-
-<h3 id="Overflowing_text">文字列があふれる場合</h3>
-
-<p>スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。</p>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html"><input id="input1" placeholder="Name, Rank, and Serial Number">
-<br><br>
-<input id="input2" placeholder="Name, Rank, and Serial Number"></pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">#input2:placeholder-shown {
- text-overflow: ellipsis;
-}</pre>
-
-<h4 id="Result_2">結果</h4>
-
-<p>{{EmbedLiveSample("Overflowing_text", 200, 80)}}</p>
-
-<h3 id="Customized_input_field">カスタマイズした入力欄</h3>
-
-<p>以下の例では部署名と ID コード欄をカスタムスタイルで強調します。</p>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html"><form id="test">
- <p>
- <label for="name">Enter Student Name:</label>
- <input id="name" placeholder="Student Name"/>
- </p>
- <p>
- <label for="branch">Enter Student Branch:</label>
- <input id="branch" placeholder="Student Branch"/>
- </p>
- <p>
- <label for="sid">Enter Student ID:</label>
- <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
- </p>
- <input type="submit"/>
-</form></pre>
-
-<h4 id="CSS_3">CSS</h4>
-
-<pre class="brush: css; highlight[6]">input {
- background-color: #E8E8E8;
- color: black;
-}
-
-input.studentid:placeholder-shown {
- background-color: yellow;
- color: red;
- font-style: italic;
-}</pre>
-
-<h4 id="Result_3">結果</h4>
-
-<p>{{EmbedLiveSample("Customized_input_field", 200, 180)}}</p>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
- <li>{{CSSxRef("::placeholder")}} 擬似要素はプレイスホルダー<em>自身</em>にスタイルを適用します。</li>
- <li>関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
- <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
-</ul>
diff --git a/files/ja/web/css/_colon_placeholder-shown/index.md b/files/ja/web/css/_colon_placeholder-shown/index.md
new file mode 100644
index 0000000000..835fb611af
--- /dev/null
+++ b/files/ja/web/css/_colon_placeholder-shown/index.md
@@ -0,0 +1,128 @@
+---
+title: ':placeholder-shown'
+slug: Web/CSS/:placeholder-shown
+tags:
+ - ':placeholder-shown'
+ - CSS
+ - Pseudo-class
+ - Reference
+ - Selector
+ - セレクター
+ - 擬似クラス
+browser-compat: css.selectors.placeholder-shown
+translation_of: Web/CSS/:placeholder-shown
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:placeholder-shown</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、<a href="/ja/docs/Web/HTML/Element/input#attr-placeholder">プレイスホルダー文字列</a>が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。</p>
+
+<pre class="brush: css no-line-numbers">/* プレイスホルダーが有効な要素を選択 */
+:placeholder-shown {
+ border: 2px solid silver;
+}</pre>
+
+<h2 id="Syntax">構文</h2>
+
+{{CSSSyntax}}
+
+<h2 id="Example">例</h2>
+
+<h3 id="Basic_example">基本的な例</h3>
+
+<p>この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html"><input placeholder="何か入力してください！"></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">input {
+ border: 1px solid black;
+ padding: 3px;
+}
+
+input:placeholder-shown {
+ border-color: teal;
+ color: purple;
+ font-style: italic;
+}</pre>
+
+<h4 id="Result">結果</h4>
+
+<p>{{EmbedLiveSample("Basic_example", 200, 80)}}</p>
+
+<h3 id="Overflowing_text">文字列があふれる場合</h3>
+
+<p>スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html"><input id="input1" placeholder="Name, Rank, and Serial Number">
+<br><br>
+<input id="input2" placeholder="Name, Rank, and Serial Number"></pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">#input2:placeholder-shown {
+ text-overflow: ellipsis;
+}</pre>
+
+<h4 id="Result_2">結果</h4>
+
+<p>{{EmbedLiveSample("Overflowing_text", 200, 80)}}</p>
+
+<h3 id="Customized_input_field">カスタマイズした入力欄</h3>
+
+<p>以下の例では部署名と ID コード欄をカスタムスタイルで強調します。</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html"><form id="test">
+ <p>
+ <label for="name">Enter Student Name:</label>
+ <input id="name" placeholder="Student Name"/>
+ </p>
+ <p>
+ <label for="branch">Enter Student Branch:</label>
+ <input id="branch" placeholder="Student Branch"/>
+ </p>
+ <p>
+ <label for="sid">Enter Student ID:</label>
+ <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
+ </p>
+ <input type="submit"/>
+</form></pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<pre class="brush: css; highlight[6]">input {
+ background-color: #E8E8E8;
+ color: black;
+}
+
+input.studentid:placeholder-shown {
+ background-color: yellow;
+ color: red;
+ font-style: italic;
+}</pre>
+
+<h4 id="Result_3">結果</h4>
+
+<p>{{EmbedLiveSample("Customized_input_field", 200, 180)}}</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+ <li>{{CSSxRef("::placeholder")}} 擬似要素はプレイスホルダー<em>自身</em>にスタイルを適用します。</li>
+ <li>関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li>
+ <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_read-only/index.html b/files/ja/web/css/_colon_read-only/index.html
deleted file mode 100644
index 727329a1cb..0000000000
--- a/files/ja/web/css/_colon_read-only/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: ':read-only'
-slug: 'Web/CSS/:read-only'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Web
- - セレクター
- - 疑似クラス
-translation_of: 'Web/CSS/:read-only'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:read-only</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、ユーザーが編集できない要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">input:read-only, textarea:read-only {
- background-color: #ccc;
-}
-
-p:read-only {
- background-color: #ccc;
-}
-</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
-
-<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
-
-<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code><textarea></code> により良いスタイル付けを行うために使用されています。</p>
-
-<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
-input:read-only, textarea:read-only {
- border: 0;
- box-shadow: none;
- background-color: white;
-}
-
-textarea:-moz-read-write,
-textarea:read-write {
- box-shadow: inset 1px 1px 3px #ccc;
- border-radius: 5px;
-}</pre>
-
-<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
-
-<h3 id="Styling_read-only_non-form_controls" name="Styling_read-only_non-form_controls">フォーム以外の読み取り専用コントロールのスタイル付け</h3>
-
-<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できない<em>あらゆる</em>要素を選択します。</p>
-
-<pre class="brush: html notranslate"><p contenteditable>この段落は編集可能です。読み書き可です。</p>
-
-<p>この段落は編集できません。読み取り専用です。</p></pre>
-
-<pre class="brush: css notranslate">p {
- font-size: 150%;
- padding: 5px;
- border-radius: 5px;
-}
-
-p:read-only {
- background-color: red;
- color: white;
-}
-
-p:read-write {
- background-color: lime;
-}</pre>
-
-<p>{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}</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('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
- <td>{{ Spec2('HTML WHATWG') }}</td>
- <td>変更なし</td>
- </tr>
- <tr>
- <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
- <td>{{ Spec2('HTML5 W3C') }}</td>
- <td>HTML および制約検証に関する意味を定義。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
- <td>{{ Spec2('CSS4 Selectors') }}</td>
- <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.read-only")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref(":read-write")}}</li>
- <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
-</ul>
diff --git a/files/ja/web/css/_colon_read-only/index.md b/files/ja/web/css/_colon_read-only/index.md
new file mode 100644
index 0000000000..727329a1cb
--- /dev/null
+++ b/files/ja/web/css/_colon_read-only/index.md
@@ -0,0 +1,119 @@
+---
+title: ':read-only'
+slug: 'Web/CSS/:read-only'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Web
+ - セレクター
+ - 疑似クラス
+translation_of: 'Web/CSS/:read-only'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:read-only</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、ユーザーが編集できない要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">input:read-only, textarea:read-only {
+ background-color: #ccc;
+}
+
+p:read-only {
+ background-color: #ccc;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
+
+<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
+
+<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code><textarea></code> により良いスタイル付けを行うために使用されています。</p>
+
+<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+ border: 0;
+ box-shadow: none;
+ background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+ box-shadow: inset 1px 1px 3px #ccc;
+ border-radius: 5px;
+}</pre>
+
+<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
+
+<h3 id="Styling_read-only_non-form_controls" name="Styling_read-only_non-form_controls">フォーム以外の読み取り専用コントロールのスタイル付け</h3>
+
+<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できない<em>あらゆる</em>要素を選択します。</p>
+
+<pre class="brush: html notranslate"><p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p></pre>
+
+<pre class="brush: css notranslate">p {
+ font-size: 150%;
+ padding: 5px;
+ border-radius: 5px;
+}
+
+p:read-only {
+ background-color: red;
+ color: white;
+}
+
+p:read-write {
+ background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}</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('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
+ <td>{{ Spec2('HTML WHATWG') }}</td>
+ <td>変更なし</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
+ <td>{{ Spec2('HTML5 W3C') }}</td>
+ <td>HTML および制約検証に関する意味を定義。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
+ <td>{{ Spec2('CSS4 Selectors') }}</td>
+ <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.selectors.read-only")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":read-write")}}</li>
+ <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
+</ul>
diff --git a/files/ja/web/css/_colon_read-write/index.html b/files/ja/web/css/_colon_read-write/index.html
deleted file mode 100644
index c8eed1f5af..0000000000
--- a/files/ja/web/css/_colon_read-write/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: ':read-write'
-slug: 'Web/CSS/:read-write'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Web
- - セレクター
- - 疑似クラス
-translation_of: 'Web/CSS/:read-write'
----
-<div>{{CSSRef}}</div>
-
-<p><strong><code>:read-write</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、ユーザーが編集できる要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">input:read-write, textarea:read-write {
- background-color: #bbf;
-}
-
-p:read-write {
- background-color: #bbf;
-}
-</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
-
-<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
-
-<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code><textarea></code> により良いスタイル付けを行うために使用されています。</p>
-
-<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
-input:read-only, textarea:read-only {
- border: 0;
- box-shadow: none;
- background-color: white;
-}
-
-textarea:-moz-read-write,
-textarea:read-write {
- box-shadow: inset 1px 1px 3px #ccc;
- border-radius: 5px;
-}</pre>
-
-<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
-
-<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
-
-<h3 id="Styling_read-write_non-form_controls" name="Styling_read-write_non-form_controls">フォーム以外の読み書き用コントロールのスタイル付け</h3>
-
-<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できる<em>あらゆる</em>要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。</p>
-
-<pre class="brush: html notranslate"><p contenteditable>この段落は編集可能です。読み書き可です。</p>
-
-<p>この段落は編集できません。読み取り専用です。</p></pre>
-
-<pre class="brush: css notranslate">p {
- font-size: 150%;
- padding: 5px;
- border-radius: 5px;
-}
-
-p:read-only {
- background-color: red;
- color: white;
-}
-
-p:read-write {
- background-color: lime;
-}</pre>
-
-<p>{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}</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('HTML WHATWG', '#selector-read-write', ':read-write') }}</td>
- <td>{{ Spec2('HTML WHATWG') }}</td>
- <td>変更なし</td>
- </tr>
- <tr>
- <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
- <td>{{ Spec2('HTML5 W3C') }}</td>
- <td>HTML および制約検証に関する意味を定義。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
- <td>{{ Spec2('CSS4 Selectors') }}</td>
- <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.read-write")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref(":read-only")}}</li>
- <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
-</ul>
diff --git a/files/ja/web/css/_colon_read-write/index.md b/files/ja/web/css/_colon_read-write/index.md
new file mode 100644
index 0000000000..c8eed1f5af
--- /dev/null
+++ b/files/ja/web/css/_colon_read-write/index.md
@@ -0,0 +1,119 @@
+---
+title: ':read-write'
+slug: 'Web/CSS/:read-write'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Web
+ - セレクター
+ - 疑似クラス
+translation_of: 'Web/CSS/:read-write'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:read-write</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、ユーザーが編集できる要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">input:read-write, textarea:read-write {
+ background-color: #bbf;
+}
+
+p:read-write {
+ background-color: #bbf;
+}
+</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
+
+<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
+
+<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code><textarea></code> により良いスタイル付けを行うために使用されています。</p>
+
+<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+ border: 0;
+ box-shadow: none;
+ background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+ box-shadow: inset 1px 1px 3px #ccc;
+ border-radius: 5px;
+}</pre>
+
+<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
+
+<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
+
+<h3 id="Styling_read-write_non-form_controls" name="Styling_read-write_non-form_controls">フォーム以外の読み書き用コントロールのスタイル付け</h3>
+
+<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できる<em>あらゆる</em>要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。</p>
+
+<pre class="brush: html notranslate"><p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p></pre>
+
+<pre class="brush: css notranslate">p {
+ font-size: 150%;
+ padding: 5px;
+ border-radius: 5px;
+}
+
+p:read-only {
+ background-color: red;
+ color: white;
+}
+
+p:read-write {
+ background-color: lime;
+}</pre>
+
+<p>{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}</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('HTML WHATWG', '#selector-read-write', ':read-write') }}</td>
+ <td>{{ Spec2('HTML WHATWG') }}</td>
+ <td>変更なし</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}</td>
+ <td>{{ Spec2('HTML5 W3C') }}</td>
+ <td>HTML および制約検証に関する意味を定義。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}</td>
+ <td>{{ Spec2('CSS4 Selectors') }}</td>
+ <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.selectors.read-write")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{cssxref(":read-only")}}</li>
+ <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
+</ul>
diff --git a/files/ja/web/css/_colon_required/index.html b/files/ja/web/css/_colon_required/index.html
deleted file mode 100644
index 293c8f64ec..0000000000
--- a/files/ja/web/css/_colon_required/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: ':required'
-slug: 'Web/CSS/:required'
-tags:
- - CSS
- - Layout
- - Pseudo-class
- - Reference
- - Selector
- - Web
-translation_of: 'Web/CSS/:required'
----
-<div>{{ CSSRef }}</div>
-
-<p><strong><code>:required</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。</p>
-
-<pre class="brush: css no-line-numbers notranslate">/* 必須の <input> をすべて選択 */
-input:required {
- border: 1px dashed red;
-}</pre>
-
-<p>この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。</p>
-
-<div class="note">
-<p><strong>注:</strong> {{cssxref(":optional")}} 擬似クラスは<em>任意</em>のフォーム欄を選択します。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="The_required_field_has_a_red_border" name="The_required_field_has_a_red_border">必須フィールドの枠を赤にする</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html notranslate"><form>
- <div class="field">
- <label for="url_input">Enter a URL:</label>
- <input type="url" id="url_input">
- </div>
-
- <div class="field">
- <label for="email_input">Enter an email address:</label>
- <input type="email" id="email_input" required>
- </div>
-</form></pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css notranslate">label {
- display: block;
- margin: 1px;
- padding: 1px;
-}
-
-.field {
- margin: 1px;
- padding: 1px;
-}
-
-input:required {
- border-color: #800000;
- border-width: 3px;
-}
-
-input:required:invalid {
- border-color: #c00000;
-}
-</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
-
-<p>入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。</p>
-
-<p>フォームに<a href="/ja/docs/Web/CSS/:optional">任意</a>の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN WCAG を理解する ― ガイドライン 3.3 の解説</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html" rel="noopener">Understanding Success Criterion 3.3.2 | W3C Understanding 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-required', ':required') }}</td>
- <td>{{ Spec2('HTML WHATWG') }}</td>
- <td>変更なし。</td>
- </tr>
- <tr>
- <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
- <td>{{ Spec2('HTML5 W3C') }}</td>
- <td>HTML の意味論と制約検証を定義。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
- <td>{{ Spec2('CSS4 Selectors') }}</td>
- <td>変更なし。</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.required")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>他の検証関連の擬似クラス: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
- <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
-</ul>
diff --git a/files/ja/web/css/_colon_required/index.md b/files/ja/web/css/_colon_required/index.md
new file mode 100644
index 0000000000..293c8f64ec
--- /dev/null
+++ b/files/ja/web/css/_colon_required/index.md
@@ -0,0 +1,126 @@
+---
+title: ':required'
+slug: 'Web/CSS/:required'
+tags:
+ - CSS
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Selector
+ - Web
+translation_of: 'Web/CSS/:required'
+---
+<div>{{ CSSRef }}</div>
+
+<p><strong><code>:required</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>で、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。</p>
+
+<pre class="brush: css no-line-numbers notranslate">/* 必須の <input> をすべて選択 */
+input:required {
+ border: 1px dashed red;
+}</pre>
+
+<p>この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。</p>
+
+<div class="note">
+<p><strong>注:</strong> {{cssxref(":optional")}} 擬似クラスは<em>任意</em>のフォーム欄を選択します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="The_required_field_has_a_red_border" name="The_required_field_has_a_red_border">必須フィールドの枠を赤にする</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate"><form>
+ <div class="field">
+ <label for="url_input">Enter a URL:</label>
+ <input type="url" id="url_input">
+ </div>
+
+ <div class="field">
+ <label for="email_input">Enter an email address:</label>
+ <input type="email" id="email_input" required>
+ </div>
+</form></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">label {
+ display: block;
+ margin: 1px;
+ padding: 1px;
+}
+
+.field {
+ margin: 1px;
+ padding: 1px;
+}
+
+input:required {
+ border-color: #800000;
+ border-width: 3px;
+}
+
+input:required:invalid {
+ border-color: #c00000;
+}
+</pre>
+
+<h4 id="Result" name="Result">結果</h4>
+
+<p>{{EmbedLiveSample('Examples', 600, 120)}}</p>
+
+<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>
+
+<p>入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。</p>
+
+<p>フォームに<a href="/ja/docs/Web/CSS/:optional">任意</a>の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。</p>
+
+<ul>
+ <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.3_%E2%80%94_Input_Assistance_Help_users_avoid_and_correct_mistakes">MDN WCAG を理解する ― ガイドライン 3.3 の解説</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html" rel="noopener">Understanding Success Criterion 3.3.2 | W3C Understanding 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-required', ':required') }}</td>
+ <td>{{ Spec2('HTML WHATWG') }}</td>
+ <td>変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}</td>
+ <td>{{ Spec2('HTML5 W3C') }}</td>
+ <td>HTML の意味論と制約検証を定義。</td>
+ </tr>
+ <tr>
+ <td>{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}</td>
+ <td>{{ Spec2('CSS4 Selectors') }}</td>
+ <td>変更なし。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.selectors.required")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>他の検証関連の擬似クラス: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}</li>
+ <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li>
+</ul>
diff --git a/files/ja/web/css/_colon_valid/index.html b/files/ja/web/css/_colon_valid/index.html
deleted file mode 100644
index 8668267a4e..0000000000
--- a/files/ja/web/css/_colon_valid/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: ':valid'
-slug: 'Web/CSS/:valid'
-tags:
- - CSS
- - CSS 基本ユーザーインターフェイス
- - Layout
- - Pseudo-class
- - Reference
- - Web
- - セレクター
- - 疑似クラス
-translation_of: 'Web/CSS/:valid'
----
-<div>{{CSSRef}}</div>
-
-<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>
-
-<pre class="brush: css no-line-numbers notranslate">/* 有効な <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>
-
-<pre class="brush: html notranslate"><div>
- <label for="fname">First name *: </label>
- <input id="fname" name="fname" type="text" required>
- <span></span>
-</div></pre>
-
-<p>これらの表示を提供するために、以下の CSS を使用します。</p>
-
-<pre class="brush: css notranslate">input + span {
- position: relative;
-}
-
-input + span::before {
- position: absolute;
- right: -20px;
- top: 5px;
-}
-
-input:invalid {
- border: 2px solid red;
-}
-
-input:invalid + span::before {
- content: '✖';
- color: red;
-}
-
-input:valid + span::before {
- content: '✓';
- color: green;
-}</pre>
-
-<p>生成されたコンテンツを相対的に配置できるように <code><span></code> を <code>position: relative</code> に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。</p>
-
-<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>
-
-<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>
-
-<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>
diff --git a/files/ja/web/css/_colon_valid/index.md b/files/ja/web/css/_colon_valid/index.md
new file mode 100644
index 0000000000..8668267a4e
--- /dev/null
+++ b/files/ja/web/css/_colon_valid/index.md
@@ -0,0 +1,128 @@
+---
+title: ':valid'
+slug: 'Web/CSS/:valid'
+tags:
+ - CSS
+ - CSS 基本ユーザーインターフェイス
+ - Layout
+ - Pseudo-class
+ - Reference
+ - Web
+ - セレクター
+ - 疑似クラス
+translation_of: 'Web/CSS/:valid'
+---
+<div>{{CSSRef}}</div>
+
+<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>
+
+<pre class="brush: css no-line-numbers notranslate">/* 有効な <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>
+
+<pre class="brush: html notranslate"><div>
+ <label for="fname">First name *: </label>
+ <input id="fname" name="fname" type="text" required>
+ <span></span>
+</div></pre>
+
+<p>これらの表示を提供するために、以下の CSS を使用します。</p>
+
+<pre class="brush: css notranslate">input + span {
+ position: relative;
+}
+
+input + span::before {
+ position: absolute;
+ right: -20px;
+ top: 5px;
+}
+
+input:invalid {
+ border: 2px solid red;
+}
+
+input:invalid + span::before {
+ content: '✖';
+ color: red;
+}
+
+input:valid + span::before {
+ content: '✓';
+ color: green;
+}</pre>
+
+<p>生成されたコンテンツを相対的に配置できるように <code><span></code> を <code>position: relative</code> に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。</p>
+
+<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>
+
+<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>
+
+<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>
--
cgit v1.2.3-54-g00ecf