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_invalid/index.html | 152 ----------------------------- files/ja/web/css/_colon_invalid/index.md | 152 +++++++++++++++++++++++++++++ 2 files changed, 152 insertions(+), 152 deletions(-) delete mode 100644 files/ja/web/css/_colon_invalid/index.html create mode 100644 files/ja/web/css/_colon_invalid/index.md (limited to 'files/ja/web/css/_colon_invalid') 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")}}

+
+ +

関連情報

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