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

+ +

関連情報

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