From 366a93a84df26a3bc08bfd85a7d87dc7c450e2cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO 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/ja/web/css') 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 ---- -
{{CSSRef}}{{Non-standard_header}}
- -

CSS の :-webkit-autofill 疑似クラスは、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。

- -

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。

- -

仕様書

- -

どの仕様書でも定義されていません。

- -

ブラウザーの対応

- -

{{Compat("css.selectors.-webkit-autofill")}}

- -

関連情報

- - 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 +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の :-webkit-autofill 疑似クラスは、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。

+ +

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。

+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの対応

+ +

{{Compat("css.selectors.-webkit-autofill")}}

+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

:checked は CSS の擬似クラスセレクターで、ラジオボタン (<input type="radio">)、 チェックボックス (<input type="checkbox">)、 オプションボタン ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり on の状態にあったりすることを表します。

- -
/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
-:checked {
-  margin-left: 25px;
-  border: 1px solid blue;
-}
-
- -

ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。

- -
-

メモ: ブラウザ―は <option> を置換要素として扱うことが多いので、 :checked 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。

-
- -

構文

- -{{csssyntax}} - -

例

- -

基本的な例

- -

HTML

- -
<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>
-
- -

CSS

- -
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;
-}
-
- -

結果

- -

{{EmbedLiveSample("Basic_example")}}

- -

非表示のチェックボックスの要素を切り替え

- -

この例では、 :checked 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 JavaScript はまったく使っていません。

- -

HTML

- -
<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>
-
- -

CSS

- -
/* トグルチェックボックスを隠す */
-#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;
-}
- -

結果

- -

{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}

- - - -

:checked 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるにはこのデモを参照してください。

- -
メモ: 似たような効果で、 :hover 擬似クラスを使用して隠しラジオボタンを使わないものについては、 :hover のリファレンスページからのこのデモを参照してください。
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}HTML に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.checked")}}

- -

関連情報

- - -
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' +--- +
{{CSSRef}}
+ +

:checked は CSS の擬似クラスセレクターで、ラジオボタン (<input type="radio">)、 チェックボックス (<input type="checkbox">)、 オプションボタン ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり on の状態にあったりすることを表します。

+ +
/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +

ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。

+ +
+

メモ: ブラウザ―は <option> を置換要素として扱うことが多いので、 :checked 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

基本的な例

+ +

HTML

+ +
<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>
+
+ +

CSS

+ +
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;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

非表示のチェックボックスの要素を切り替え

+ +

この例では、 :checked 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 JavaScript はまったく使っていません。

+ +

HTML

+ +
<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>
+
+ +

CSS

+ +
/* トグルチェックボックスを隠す */
+#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;
+}
+ +

結果

+ +

{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}

+ + + +

:checked 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるにはこのデモを参照してください。

+ +
メモ: 似たような効果で、 :hover 擬似クラスを使用して隠しラジオボタンを使わないものについては、 :hover のリファレンスページからのこのデモを参照してください。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}HTML に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}変更なし。
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.checked")}}

+ +

関連情報

+ + +
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' ---- -
{{CSSRef}}
- -

:default は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。

- -

このセレクターが何に一致するかについては、 HTML Standard §4.16.3 Pseudo-classes で定義されています。 — {{htmlelement("button")}}、 <input type="checkbox">、 <input type="radio">、 {{htmlelement("option")}} 要素に一致させることができます。

- - - -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<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>
-
- -

CSS

- -
input:default {
-  box-shadow: 0 0 2px 1px coral;
-}
-
-input:default + label {
-  color: coral;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}HTML に関する意味付けと制約検証を定義。
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}変更なし。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.default")}}

- -

関連情報

- - -
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' +--- +
{{CSSRef}}
+ +

:default は CSS の擬似クラスで、関連する要素のグループ内で既定となっているフォーム上の要素を選択します。

+ +

このセレクターが何に一致するかについては、 HTML Standard §4.16.3 Pseudo-classes で定義されています。 — {{htmlelement("button")}}、 <input type="checkbox">、 <input type="radio">、 {{htmlelement("option")}} 要素に一致させることができます。

+ + + +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<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>
+
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}HTML に関する意味付けと制約検証を定義。
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}変更なし。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.default")}}

+ +

関連情報

+ + +
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' ---- -
{{CSSRef}}
- -

:disabled は CSS の擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。

- -
/* 無効な <input> を選択 */
-input:disabled {
-  background: #ccc;
-}
- -

構文

- -{{csssyntax}} - -

例

- -

この例は基本的な送り先フォームを表示します。 JavaScript の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。

- -

HTML

- -
<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>
-
- -

CSS

- -
input[type="text"]:disabled {
-  background: #ccc;
-}
-
- -

JavaScript

- -
// ページの読み込みの終了を待つ
-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;
-  }
-}
-
- -

結果

- -

{{EmbedLiveSample('Examples', 300, 250)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義、但し意味の結びつけの定義はなし
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.disabled")}}

-
- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:disabled は CSS の擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化（選択、クリック、入力など）したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。

+ +
/* 無効な <input> を選択 */
+input:disabled {
+  background: #ccc;
+}
+ +

構文

+ +{{csssyntax}} + +

例

+ +

この例は基本的な送り先フォームを表示します。 JavaScript の {{event("change")}} イベントを使用して、ユーザーが請求先欄を有効化／無効化できるようにします。

+ +

HTML

+ +
<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>
+
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

JavaScript

+ +
// ページの読み込みの終了を待つ
+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;
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 300, 250)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.disabled")}}

+
+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

:enabled は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。

- -
/* 有効な <input> を選択 */
-input:enabled {
-  color: blue;
-}
- -

構文

- -{{csssyntax}} - -

例

- -

以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

- -

HTML

- -
<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>
- -

CSS

- -
input:enabled {
-  color: #2b2;
-}
-
-input:disabled {
-  color: #aaa;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", 550, 95)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義。ただし意味の結びつけの定義はなし。
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.enabled")}}

- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:enabled は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。

+ +
/* 有効な <input> を選択 */
+input:enabled {
+  color: blue;
+}
+ +

構文

+ +{{csssyntax}} + +

例

+ +

以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

+ +

HTML

+ +
<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>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 550, 95)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義。ただし意味の結びつけの定義はなし。
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.enabled")}}

+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

CSS の :in-range 疑似クラスは、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性による制限範囲内にある {{htmlelement("input")}} 要素を表します。

- -
/* 入力範囲が設定されていて、値がその範囲に該当する
-   <input> 要素をすべて選択 */
-input:in-range {
-  background-color: rgba(0, 255, 0, 0.25);
-}
- -

この疑似クラスは。入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

- -
Note: この疑似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
- -

構文

- -{{csssyntax}} - -

例

- -
-

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>
- -

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: '範囲外です！';
-}
- -

結果

-
- -
{{EmbedLiveSample('Example', 600, 140)}}
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}いつ HTML が :in-range に該当するかを定義。
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}初回定義。
- -

ブラウザー実装状況

- -
-
-

{{Compat("css.selectors.in-range")}}

-
-
- -

関連項目

- - 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' +--- +
{{CSSRef}}
+ +

CSS の :in-range 疑似クラスは、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性による制限範囲内にある {{htmlelement("input")}} 要素を表します。

+ +
/* 入力範囲が設定されていて、値がその範囲に該当する
+   <input> 要素をすべて選択 */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

この疑似クラスは。入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

+ +
Note: この疑似クラスは範囲制限を持つ（または設定できる）要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
+ +

構文

+ +{{csssyntax}} + +

例

+ +
+

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>
+ +

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: '範囲外です！';
+}
+ +

結果

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}いつ HTML が :in-range に該当するかを定義。
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザー実装状況

+ +
+
+

{{Compat("css.selectors.in-range")}}

+
+
+ +

関連項目

+ + 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' ---- -
{{CSSRef}}
- -

:indeterminate は CSS の擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の indeterminate 属性が true に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。

- -
/* 中間の状態にある <input> をすべて選択 */
-input:indeterminate {
-  background: lime;
-}
- -

このセレクターが対象とする要素は以下の通りです。

- - - -

構文

- -{{csssyntax}} - -

例

- -

チェックボックスとラジオボタン

- -

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

- -

HTML

- -
<div>
-  <input type="checkbox" id="checkbox">
-  <label for="checkbox">背景が緑色になるはずです</label>
-</div>
-<div>
-  <input type="radio" id="radio">
-  <label for="radio">背景が緑色になるはずです</label>
-</div>
- -

CSS

- -
input:indeterminate + label {
-  background: lime;
-}
-
- -

JavaScript

- -
var inputs = document.getElementsByTagName("input");
-
-for (var i = 0; i < inputs.length; i++) {
-  inputs[i].indeterminate = true;
-}
-
- -

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

- -

プログレスバー

- -

HTML

- -
<progress>
-
- -

CSS

- -
progress {
-  margin: 4px;
-}
-
-progress:indeterminate {
-  opacity: 0.5;
-  background-color: lightgray;
-  box-shadow: 0 0 2px 1px red;
-}
-
- -

結果

- -

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}HTML における意味論と制約検証の定義。
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}変更なし。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.indeterminate")}}

- -

関連情報

- - -
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' +--- +
{{CSSRef}}
+ +

:indeterminate は CSS の擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の indeterminate 属性が true に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。

+ +
/* 中間の状態にある <input> をすべて選択 */
+input:indeterminate {
+  background: lime;
+}
+ +

このセレクターが対象とする要素は以下の通りです。

+ + + +

構文

+ +{{csssyntax}} + +

例

+ +

チェックボックスとラジオボタン

+ +

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">背景が緑色になるはずです</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">背景が緑色になるはずです</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

+ +

プログレスバー

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}HTML における意味論と制約検証の定義。
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}変更なし。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.indeterminate")}}

+ +

関連情報

+ + +
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' ---- -
{{CSSRef}}
- -

:invalid は CSS の擬似クラスで、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が検証に失敗したものを表します。

- -
/* 無効な <input> を選択 */
-input:invalid {
-  background-color: pink;
-}
- -

この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

- -

構文

- -{{csssyntax}} - -

例

- -

この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。

- -

HTML

- -
<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>
- -

CSS

- -
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;
-}
-
- -

結果

- -

{{EmbedLiveSample('Examples', 600, 120)}}

- -

アクセシビリティの考慮

- -

赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

- - - -

注

- -

ラジオボタン

- -

グループのラジオボタンの1つがs required の場合、 :invalid 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ name 属性を共有しています。）

- -

Gecko の既定値

- -

既定で Gecko は :invalid 擬似クラスのスタイルを適用しません。しかし、 :invalid の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}初回定義。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.invalid")}}

-
- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:invalid は CSS の擬似クラスで、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が検証に失敗したものを表します。

+ +
/* 無効な <input> を選択 */
+input:invalid {
+  background-color: pink;
+}
+ +

この擬似クラスは、入力欄の現在の値が許可された範囲内にあることをユーザーに視覚的に示すのに便利です。

+ +

構文

+ +{{csssyntax}} + +

例

+ +

この例は、検証ができた要素を緑に色付け、検証ができなかった要素を赤に色付ける単純なフォームを表しています。

+ +

HTML

+ +
<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>
+ +

CSS

+ +
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;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

+ + + +

注

+ +

ラジオボタン

+ +

グループのラジオボタンの1つがs required の場合、 :invalid 擬似クラスはグループ内のボタンが1つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ name 属性を共有しています。）

+ +

Gecko の既定値

+ +

既定で Gecko は :invalid 擬似クラスのスタイルを適用しません。しかし、 :invalid の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.invalid")}}

+
+ +

関連情報

+ + 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' ---- -
{{ CSSRef }}
- -

:optional は CSS の擬似クラスで、 {{ htmlattrxref("required", "input") }} 属性が設定されていない {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素を表します。

- -
/* 任意の <input> をすべて選択 */
-input:optional {
-  border: 1px dashed black;
-}
- -

この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。

- -
-

注: {{cssxref(":required")}} 擬似クラスは必須のフォーム欄を選択します。

-
- -

構文

- -{{csssyntax}} - -

例

- -

オプションのフィールドの枠を紫にする

- -

HTML

- -
<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>
- -

CSS

- -
label {
-  display: block;
-  margin: 1px;
-  padding: 1px;
-}
-
-.field {
-  margin: 1px;
-  padding: 1px;
-}
-
-input:optional {
-  border-color: rebeccapurple;
-  border-width: 3px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Examples', 600, 120)}}

- -

アクセシビリティの考慮

- -

フォームに必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

- -

必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}変更なし。
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.optional")}}

- -

関連項目

- - 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' +--- +
{{ CSSRef }}
+ +

:optional は CSS の擬似クラスで、 {{ htmlattrxref("required", "input") }} 属性が設定されていない {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素を表します。

+ +
/* 任意の <input> をすべて選択 */
+input:optional {
+  border: 1px dashed black;
+}
+ +

この擬似クラスは。フォームを送信するにあたって必須ではない入力欄にスタイルを適用するのに便利です。

+ +
+

注: {{cssxref(":required")}} 擬似クラスは必須のフォーム欄を選択します。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

オプションのフィールドの枠を紫にする

+ +

HTML

+ +
<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>
+ +

CSS

+ +
label {
+  display: block;
+  margin: 1px;
+  padding: 1px;
+}
+
+.field {
+  margin: 1px;
+  padding: 1px;
+}
+
+input:optional {
+  border-color: rebeccapurple;
+  border-width: 3px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

フォームに必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

+ +

必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}変更なし。
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.optional")}}

+ +

関連項目

+ + 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' ---- -
{{CSSRef}}
- -

:out-of-range は CSS の擬似クラスで、 {{htmlelement("input")}} 要素のうち、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性で指定された範囲を外れているものを表します。

- -
/* 入力範囲が設定されていて、値がその範囲外である
-   <input> 要素をすべて選択 */
-input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
-}
- -

この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。

- -
注: この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
- -

構文

- -{{csssyntax}} - -

例

- -
-

HTML

- -
<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>
- -

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: '範囲外です！';
-}
- -

結果

-
- -
{{EmbedLiveSample('Examples', 600, 140)}}
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}いつ HTML が :out-of-range に該当するかを定義。
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}初回定義
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.out-of-range")}}

-
- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:out-of-range は CSS の擬似クラスで、 {{htmlelement("input")}} 要素のうち、現在の値が {{htmlattrxref("min", "input")}} および {{htmlattrxref("max","input")}} 属性で指定された範囲を外れているものを表します。

+ +
/* 入力範囲が設定されていて、値がその範囲外である
+   <input> 要素をすべて選択 */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

この擬似クラスは。入力欄の現在の値が許可された範囲外にあることをユーザーに視覚的に示すのに便利です。

+ +
注: この擬似クラスは範囲制限を持つ (または設定できる) 要素にのみ適用されます。そのような制限がない場合は、要素は "in-range" にも "out-of-range" にもなりません。
+ +

構文

+ +{{csssyntax}} + +

例

+ +
+

HTML

+ +
<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>
+ +

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: '範囲外です！';
+}
+ +

結果

+
+ +
{{EmbedLiveSample('Examples', 600, 140)}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}いつ HTML が :out-of-range に該当するかを定義。
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}初回定義
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.out-of-range")}}

+
+ +

関連情報

+ + 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 ---- -
{{CSSRef}}
- -

:placeholder-shown は CSS の擬似クラスで、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

- -
/* プレイスホルダーが有効な要素を選択 */
-:placeholder-shown {
-  border: 2px solid silver;
-}
- -

構文

- -{{CSSSyntax}} - -

例

- -

基本的な例

- -

この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。

- -

HTML

- -
<input placeholder="何か入力してください！">
- -

CSS

- -
input {
-  border: 1px solid black;
-  padding: 3px;
-}
-
-input:placeholder-shown {
-  border-color: teal;
-  color: purple;
-  font-style: italic;
-}
- -

結果

- -

{{EmbedLiveSample("Basic_example", 200, 80)}}

- -

文字列があふれる場合

- -

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。

- -

HTML

- -
<input id="input1" placeholder="Name, Rank, and Serial Number">
-<br><br>
-<input id="input2" placeholder="Name, Rank, and Serial Number">
- -

CSS

- -
#input2:placeholder-shown {
-  text-overflow: ellipsis;
-}
- -

結果

- -

{{EmbedLiveSample("Overflowing_text", 200, 80)}}

- -

カスタマイズした入力欄

- -

以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

- -

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>
- -

CSS

- -
input {
-  background-color: #E8E8E8;
-  color: black;
-}
-
-input.studentid:placeholder-shown {
-  background-color: yellow;
-  color: red;
-  font-style: italic;
-}
- -

結果

- -

{{EmbedLiveSample("Customized_input_field", 200, 180)}}

- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - 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 +--- +
{{CSSRef}}
+ +

:placeholder-shown は CSS の擬似クラスで、プレイスホルダー文字列が表示されている {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素を表します。

+ +
/* プレイスホルダーが有効な要素を選択 */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

基本的な例

+ +

この例は、プレイスホルダーが表示されているときに特殊なフォントと境界線を適用します。

+ +

HTML

+ +
<input placeholder="何か入力してください！">
+ +

CSS

+ +
input {
+  border: 1px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: teal;
+  color: purple;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Basic_example", 200, 80)}}

+ +

文字列があふれる場合

+ +

スマートフォンのような狭い画面では、検索ボックスやその他の入力欄の幅はとても狭くなります。これにより、プレイスホルダーの文字列が望ましくない形で切り取られることがあります。 {{cssxref("text-overflow")}} プロパティでこの挙動を修正すると便利です。

+ +

HTML

+ +
<input id="input1" placeholder="Name, Rank, and Serial Number">
+<br><br>
+<input id="input2" placeholder="Name, Rank, and Serial Number">
+ +

CSS

+ +
#input2:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

結果

+ +

{{EmbedLiveSample("Overflowing_text", 200, 80)}}

+ +

カスタマイズした入力欄

+ +

以下の例では部署名と ID コード欄をカスタムスタイルで強調します。

+ +

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>
+ +

CSS

+ +
input {
+  background-color: #E8E8E8;
+  color: black;
+}
+
+input.studentid:placeholder-shown {
+  background-color: yellow;
+  color: red;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Customized_input_field", 200, 180)}}

+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

:read-only は CSS の擬似クラスで、ユーザーが編集できない要素 (input や textarea など) を表します。

- -
input:read-only, textarea:read-only {
-  background-color: #ccc;
-}
-
-p:read-only {
-  background-color: #ccc;
-}
-
- -

構文

- -{{csssyntax}} - -

例

- -

読み取り専用/読み書きコントロールによるフォーム情報の確認

- -

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

- -

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

- -
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;
-}
- -

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

- -

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

- -

フォーム以外の読み取り専用コントロールのスタイル付け

- -

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できないあらゆる要素を選択します。

- -
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
-
-<p>この段落は編集できません。読み取り専用です。</p>
- -
p {
-  font-size: 150%;
-  padding: 5px;
-  border-radius: 5px;
-}
-
-p:read-only {
-  background-color: red;
-  color: white;
-}
-
-p:read-write {
-  background-color: lime;
-}
- -

{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.read-only")}}

- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:read-only は CSS の擬似クラスで、ユーザーが編集できない要素 (input や textarea など) を表します。

+ +
input:read-only, textarea:read-only {
+  background-color: #ccc;
+}
+
+p:read-only {
+  background-color: #ccc;
+}
+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

読み取り専用/読み書きコントロールによるフォーム情報の確認

+ +

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

+ +

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

+ +
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;
+}
+ +

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

+ +

フォーム以外の読み取り専用コントロールのスタイル付け

+ +

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できないあらゆる要素を選択します。

+ +
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p>
+ +
p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.read-only")}}

+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

:read-write は CSS の擬似クラスで、ユーザーが編集できる要素 (input や textarea など) を表します。

- -
input:read-write, textarea:read-write {
-  background-color: #bbf;
-}
-
-p:read-write {
-  background-color: #bbf;
-}
-
- -

構文

- -{{csssyntax}} - -

例

- -

読み取り専用/読み書きコントロールによるフォーム情報の確認

- -

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

- -

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

- -
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;
-}
- -

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

- -

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

- -

フォーム以外の読み書き用コントロールのスタイル付け

- -

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できるあらゆる要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。

- -
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
-
-<p>この段落は編集できません。読み取り専用です。</p>
- -
p {
-  font-size: 150%;
-  padding: 5px;
-  border-radius: 5px;
-}
-
-p:read-only {
-  background-color: red;
-  color: white;
-}
-
-p:read-write {
-  background-color: lime;
-}
- -

{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.read-write")}}

- -

関連情報

- - 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' +--- +
{{CSSRef}}
+ +

:read-write は CSS の擬似クラスで、ユーザーが編集できる要素 (input や textarea など) を表します。

+ +
input:read-write, textarea:read-write {
+  background-color: #bbf;
+}
+
+p:read-write {
+  background-color: #bbf;
+}
+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

読み取り専用/読み書きコントロールによるフォーム情報の確認

+ +

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

+ +

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

+ +
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;
+}
+ +

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

+ +

フォーム以外の読み書き用コントロールのスタイル付け

+ +

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できるあらゆる要素、例えば {{htmlelement("p")}} 要素に {{htmlattrxref("contenteditable")}} が設定されたものを選択します。

+ +
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p>
+ +
p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Styling_read-write_non-form_controls', '100%', 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.read-write")}}

+ +

関連情報

+ + 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' ---- -
{{ CSSRef }}
- -

:required は CSS の 擬似クラスで、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。

- -
/* 必須の <input> をすべて選択 */
-input:required {
-  border: 1px dashed red;
-}
- -

この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

- -
-

注: {{cssxref(":optional")}} 擬似クラスは任意のフォーム欄を選択します。

-
- -

構文

- -{{csssyntax}} - -

例

- -

必須フィールドの枠を赤にする

- -

HTML

- -
<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>
- -

CSS

- -
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;
-}
-
- -

結果

- -

{{EmbedLiveSample('Examples', 600, 120)}}

- -

アクセシビリティの考慮

- -

入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

- -

フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}変更なし。
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.required")}}

- -

関連情報

- - 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' +--- +
{{ CSSRef }}
+ +

:required は CSS の 擬似クラスで、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。

+ +
/* 必須の <input> をすべて選択 */
+input:required {
+  border: 1px dashed red;
+}
+ +

この擬似クラスは、フォームを送信する前に有効なデータを持っている必要がある入力欄を強調表示するのに便利です。

+ +
+

注: {{cssxref(":optional")}} 擬似クラスは任意のフォーム欄を選択します。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

必須フィールドの枠を赤にする

+ +

HTML

+ +
<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>
+ +

CSS

+ +
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;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 600, 120)}}

+ +

アクセシビリティの考慮

+ +

入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。

+ +

フォームに任意の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}変更なし。
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}HTML の意味論と制約検証を定義。
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}変更なし。
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.required")}}

+ +

関連情報

+ + 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' ---- -
{{CSSRef}}
- -

CSS の :valid 擬似クラスは、内容の検証に成功した {{htmlelement("input")}} 要素 やその他の {{HTMLElement("form")}} 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。

- -
/* 有効な <input> をすべて選択 */
-input:valid {
-  background-color: powderblue;
-}
- -

この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。

- -

構文

- -{{csssyntax}} - -

例

- -

この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。

- -
<div>
-  <label for="fname">First name *: </label>
-  <input id="fname" name="fname" type="text" required>
-  <span></span>
-</div>
- -

これらの表示を提供するために、以下の CSS を使用します。

- -
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;
-}
- -

生成されたコンテンツを相対的に配置できるように <span> を position: relative に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。

- -
-

Note: We've used ::before to add these labels, as we were already using ::after for the "required" labels.

-
- -

You can try it below:

- -

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}

- -

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.

- -

アクセシビリティの考慮事項

- -

緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}初回定義。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.valid")}}

-
- -

関連項目

- - 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' +--- +
{{CSSRef}}
+ +

CSS の :valid 擬似クラスは、内容の検証に成功した {{htmlelement("input")}} 要素 やその他の {{HTMLElement("form")}} 要素を表します。これにより、有効な入力欄に、データの形式が適切であることをユーザーが確認しやすくなる外観を簡単に適用できるようになります。

+ +
/* 有効な <input> をすべて選択 */
+input:valid {
+  background-color: powderblue;
+}
+ +

この擬似クラスは、入力値が正しい入力欄をユーザーに強調表示するのに便利です。

+ +

構文

+ +{{csssyntax}} + +

例

+ +

この例では、このような構造を使用しています。この構造には、コンテンツを生成するための追加の が含まれており、これらを使用して、データが有効であるか無効であるかの表示を提供します。

+ +
<div>
+  <label for="fname">First name *: </label>
+  <input id="fname" name="fname" type="text" required>
+  <span></span>
+</div>
+ +

これらの表示を提供するために、以下の CSS を使用します。

+ +
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;
+}
+ +

生成されたコンテンツを相対的に配置できるように <span> を position: relative に設定します。そして、フォームのデータが有効か無効かに応じて、生成されるコンテンツを絶対位置指定で配置します。無効なデータには、さらに軽く緊急性を表すために、無効になったときに太い赤い枠線をつけています。

+ +
+

Note: We've used ::before to add these labels, as we were already using ::after for the "required" labels.

+
+ +

You can try it below:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}}

+ +

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.

+ +

アクセシビリティの考慮事項

+ +

緑色は入力が有効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}HTML の意味論と制約検証を定義。
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.valid")}}

+
+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf