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

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

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

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

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

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

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

構文

+## 構文 {{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;
@@ -64,59 +68,30 @@ 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")}}

- -

関連項目

- - +``` + +#### 結果 + +{{EmbedLiveSample('Examples', 600, 120)}} + +## アクセシビリティの考慮 + +[フォーム](/ja/docs/Web/HTML/Element/form)に必須ではない {{htmlelement("input")}} が含まれている場合、必須の入力欄には {{ htmlattrxref("required", "input") }} 属性を適用してください。これによって、読み上げソフトなどの支援技術を使用している人が、フォームを送信するためにどの入力欄が有効なコンテンツを必要とするかを理解することができます。 + +必須の入力欄を視覚的に示すのに、色だけに依存しないようにしてください。通常、説明する文字列やアイコンが使用されます。 + +- [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(":required") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }} +- [フォームデータの検証](/ja/docs/Learn/Forms/Form_validation) -- cgit v1.2.3-54-g00ecf