From 92e18fe52ea5dafef7c00aa7205d672e0a0f36dc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 01:04:08 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_invalid/index.md | 167 +++++++++++++------------------ 1 file changed, 70 insertions(+), 97 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_invalid/index.md b/files/ja/web/css/_colon_invalid/index.md index 57c48a21b9..bd28c2388f 100644 --- a/files/ja/web/css/_colon_invalid/index.md +++ b/files/ja/web/css/_colon_invalid/index.md @@ -1,53 +1,57 @@ --- title: ':invalid' -slug: 'Web/CSS/:invalid' +slug: Web/CSS/:invalid tags: - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web - - セレクター + - レイアウト - 擬似クラス -translation_of: 'Web/CSS/:invalid' + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.invalid +translation_of: Web/CSS/:invalid --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:invalid`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 {{HTMLElement("input")}} 要素や {{HTMLElement("form")}} 要素のうち内容が[検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗したものを表します。 -
/* 無効な <input> を選択 */
+```css
+/* 無効な  を選択 */
 input:invalid {
   background-color: pink;
-}
+} +``` -

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

+この擬似クラスは、フィールドのエラーをユーザーに強調表示するのに便利です。 -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

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

+### 要素が検証に成功すると緑色に、失敗すると赤色に着色されるフォーム -

HTML

+### HTML -
<form>
-  <div class="field">
-    <label for="url_input">URL を入力して下さい:</label>
-    <input type="url" id="url_input">
-  </div>
+```html
+

+  

+    
+    
+  

 
-  <div class="field">
-    <label for="email_input">メールアドレスを入力して下さい:</label>
-    <input type="email" id="email_input" required>
-  </div>
-</form>
+
+ + +
+ +``` -

CSS

+#### CSS -
label {
+```css
+label {
   display: block;
   margin: 1px;
   padding: 1px;
@@ -82,71 +86,40 @@ input:required {
 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")}}

-
- -

関連情報

- - +``` + +### 結果 + +{{EmbedLiveSample('Examples', 600, 120)}} + +## アクセシビリティの考慮 + +赤は入力が無効であることを示すためによく使われます。色盲の人によっては、それ以外の色によらない識別方法を伴わないと、入力状態が判別できないことがあります。通常、文字列やアイコンを使用して説明します。 + +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html) + +## 注 + +### ラジオボタン + +グループのラジオボタンの 1 つが `required` の場合、 `:invalid` 擬似クラスはグループ内のボタンが 1 つも選択されていない時に選択されます。（グループ化されたラジオボタンは同じ `name` 属性を共有しています。） + +### Gecko の既定値 + +既定で Gecko は `:invalid` 擬似クラスのスタイルを適用しません。しかし、 `:invalid` の場合のサブセットに適用される {{cssxref(":-moz-ui-invalid")}} 擬似クラスにスタイル（{{Cssxref("box-shadow")}} プロパティを用いて赤く「伸びる」スタイル）を適用します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 検証に関する他の擬似クラス: {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":valid") }} +- 関連する Mozilla の擬似クラス: {{cssxref(":user-invalid")}}, {{cssxref(":-moz-submit-invalid")}} +- [フォームデータの検証](/ja/docs/Learn/Forms/Form_validation) +- JavaScript からの [validity state](/ja/docs/Web/API/ValidityState) へのアクセス -- cgit v1.2.3-54-g00ecf