From 85fb46b28b13c6560d7eae64649e444daf33902b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 4 Jan 2022 01:19:42 +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_required/index.md | 149 +++++++++++++----------------- 1 file changed, 62 insertions(+), 87 deletions(-) diff --git a/files/ja/web/css/_colon_required/index.md b/files/ja/web/css/_colon_required/index.md index 293c8f64ec..02e4068c59 100644 --- a/files/ja/web/css/_colon_required/index.md +++ b/files/ja/web/css/_colon_required/index.md @@ -1,55 +1,59 @@ --- title: ':required' -slug: 'Web/CSS/:required' +slug: Web/CSS/:required tags: - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:required' + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.required +translation_of: Web/CSS/:required --- -
{{ CSSRef }}
+{{ CSSRef }} -

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

+**`:required`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、 {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素のうち {{ htmlattrxref("required", "input") }} 属性が設定されているものを表します。 -
/* 必須の <input> をすべて選択 */
+```css
+/* 必須の  をすべて選択 */
 input:required {
   border: 1px dashed red;
-}
+} +``` -

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

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

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

-
+> **Note:** {{cssxref(":optional")}} 擬似クラスは*省略可能*なフォーム欄を選択します。 -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

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

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

HTML

+#### HTML -
<form>
-  <div class="field">
-    <label for="url_input">Enter a URL:</label>
-    <input type="url" id="url_input">
-  </div>
+```html
+

+  

+    
+    
+  

 
-  <div class="field">
-    <label for="email_input">Enter an email address:</label>
-    <input type="email" id="email_input" required>
-  </div>
-</form>
+
+ + +
+ +``` -

CSS

+#### CSS -
label {
+```css
+label {
   display: block;
   margin: 1px;
   padding: 1px;
@@ -68,59 +72,30 @@ input:required {
 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")}}

- -

関連情報

- - +``` + +#### 結果 + +{{EmbedLiveSample('Examples', 600, 120)}} + +## アクセシビリティの考慮 + +入力が必須の {{htmlelement("input")}} には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。 + +フォームに[任意](/ja/docs/Web/CSS/:optional)の入力欄も含まれている場合、必須の入力欄を視覚的に示すのを色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。 + +- [MDN WCAG を理解する ― ガイドライン 3.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes) +- [Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 他の検証関連の擬似クラス: {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }} +- [フォームデータの検証](/ja/docs/Learn/Forms/Form_validation) -- cgit v1.2.3-54-g00ecf