From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../ja/web/css/_doublecolon_placeholder/index.html | 153 +++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/ja/web/css/_doublecolon_placeholder/index.html (limited to 'files/ja/web/css/_doublecolon_placeholder') diff --git a/files/ja/web/css/_doublecolon_placeholder/index.html b/files/ja/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..114448ae34 --- /dev/null +++ b/files/ja/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,153 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Experimental + - Reference + - フォーム + - 疑似要素 +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}
+ +

::placeholder は CSS の疑似要素で、 {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素のプレイスホルダー文字列を表します。

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

セレクターに ::placeholder を使ったルールを使用できるのは、{{cssxref("::first-line")}} 疑似要素に適用できる CSS プロパティだけです。

+ +
+

メモ: 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。

+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

赤い文字

+ +

HTML

+ +
<input placeholder="何か入力してください！">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

結果

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

緑のテキスト

+ +

HTML

+ +
<input placeholder="何か入力してください...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

アクセシビリティの考慮事項

+ +

色のコントラスト

+ +

コントラスト比

+ +

プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。

+ +

プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。

+ +

色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

使用性

+ +

プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。

+ +

プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 aria-describedby を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。

+ +

この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は aria-describedby を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Windows 高コントラストモード

+ +

プレイスホルダー文字列は、 Windows 高コントラストモードではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。

+ + + +

ラベル

+ +

プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} 及び {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義
+ +

ブラウザーの対応

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

関連情報

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