diff options
| -rw-r--r-- | files/ja/web/css/_doublecolon_placeholder/index.md | 185 |
1 files changed, 88 insertions, 97 deletions
diff --git a/files/ja/web/css/_doublecolon_placeholder/index.md b/files/ja/web/css/_doublecolon_placeholder/index.md index fd01d7c703..85cb243a90 100644 --- a/files/ja/web/css/_doublecolon_placeholder/index.md +++ b/files/ja/web/css/_doublecolon_placeholder/index.md @@ -1,151 +1,142 @@ --- title: '::placeholder' -slug: 'Web/CSS/::placeholder' +slug: Web/CSS/::placeholder tags: + - '::placeholder' - CSS - - Experimental - - Reference - - フォーム - - 疑似要素 -translation_of: 'Web/CSS/::placeholder' + - 擬似要素 + - リファレンス + - セレクター +browser-compat: css.selectors.placeholder +translation_of: Web/CSS/::placeholder --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>::placeholder</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>で、 {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素の<a href="/ja/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">プレイスホルダー文字列</a>を表します。</p> +**`::placeholder`** は [CSS](/ja/docs/Web/CSS) の[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で、 {{HTMLElement("input")}} または {{HTMLElement("textarea")}} 要素の{{htmlattrxref("placeholder","input","プレイスホルダー文字列",1)}}を表します。 -<pre class="brush: css no-line-numbers">::placeholder { +```css +::placeholder { color: blue; font-size: 1.5em; -}</pre> +} +``` -<p>セレクターに <code>::placeholder</code> を使ったルールを使用できるのは、{{cssxref("::first-line")}} 疑似要素に適用できる CSS プロパティだけです。</p> +セレクターに `::placeholder` を使ったルールを使用できるのは、{{cssxref("::first-line")}} 擬似要素に適用できる CSS プロパティだけです。 -<div class="note"> -<p><strong>メモ:</strong> 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。</p> -</div> +> **Note:** 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## アクセシビリティの考慮事項 -<h3 id="Red_text" name="Red_text">赤い文字</h3> +### 色のコントラスト -<h4 id="HTML">HTML</h4> +#### コントラスト比 -<pre class="brush:html line-numbers language-html"><input placeholder="何か入力してください！"></pre> +プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。 -<h4 id="CSS">CSS</h4> +プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。 -<pre class="brush: css">input::placeholder { - color: red; - font-size: 1.2em; - font-style: italic; -}</pre> +色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。 -<h4 id="Result" name="Result">結果</h4> +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [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.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p> +#### 使用性 -<h3 id="Green_text" name="Green_text">緑のテキスト</h3> +プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。 -<h4 id="HTML_2">HTML</h4> +プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 [`aria-describedby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。 -<pre class="brush:html line-numbers language-html"><input placeholder="何か入力してください..."></pre> +この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は `aria-describedby` を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。 -<h4 id="CSS_2">CSS</h4> +```html +<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"> +``` -<pre class="brush: css">input::placeholder { - color: green; -} -</pre> +- [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/) + +### Windows 高コントラストモード + +プレイスホルダー文字列は、 [Windows 高コントラストモード](/ja/docs/Web/CSS/@media/-ms-high-contrast)ではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。 -<h4 id="Result_2" name="Result_2">結果</h4> +- [Greg Whitworth — How to use -ms-high-contrast](https://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast) -<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p> +### ラベル -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} および {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。 -<h3 id="Color_contrast" name="Color_contrast">色のコントラスト</h3> +- [MDN 基本的なフォームのヒント](/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints) +- [Placeholders in Form Fields Are Harmful — Nielsen Norman Group](https://www.nngroup.com/articles/form-design-placeholders/) -<h4 id="Contrast_Ratio" name="Contrast_Ratio">コントラスト比</h4> +## 例 -<p>プレイスホルダー文字列はふつう、どのような入力が正しいかを示すものであり、実際の入力ではないことを示すために、薄い色になっています。</p> +### プレイスホルダーの外見の変更 -<p>プレイスホルダー文字列と入力欄の背景色のコントラスト比が、弱視の人が読むことができるために十分であることと同時に、プレイスホルダー文字列と入力テキストの差が違いが十分であり、プレイスホルダーが入力されたデータと誤認しないようになっていることを確認することが重要です。</p> +この例では、プレースホルダーテキストのスタイルに加えることができる調整項目を紹介します。 -<p>色のコントラスト比は、プレイスホルダー文字列と入力欄の背景色の値とを比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p> +#### HTML -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li> - <li><a href="/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">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> +```html +<input placeholder="こちらに入力..."> +``` -<h4 id="Usability" name="Usability">使用性</h4> +#### CSS -<p>プレイスホルダー文字列のコントラストが十分に高いと、入力された値と誤解される可能性があります。プレイスホルダー文字列は人間が {{htmlelement("input")}} 要素の中にコンテンツを入力すると、消滅するものでもあります。どちらも、特に認知症の人にはフォームの入力を完了させのに困難を伴う可能性があります。</p> +```css +input::placeholder { + color: red; + font-size: 1.2em; + font-style: italic; +} +``` -<p>プレイスホルダー情報を提供するには、他にも入力欄の外側で視覚的に近いところに表示し、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用して {{HTMLElement("input")}} とヒントをプログラム的に関連付ける方法もあります。</p> +#### 結果 -<p>この実装方法では、上方が入力欄に入力されてもヒントを見ることができ、ページが読み込まれたときに既に入力されているように見えることがありません。多くの読み上げ技術は <code>aria-describedby</code> を使用して、入力欄のラベルのテキストを読み上げた後でヒントを読み上げ、読み上げソフトを使用している人は、追加情報が必要なければ読み上げを抑止することができます。</p> +{{EmbedLiveSample("Change_placeholder_appearance", 200, 60)}} -<pre class="brush:html line-numbers language-html"><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"> -</pre> +### 不透明なテキスト -<ul> - <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> -</ul> +Firefox など一部のブラウザーでは、プレースホルダーの既定の {{cssxref("opacity")}} を 100% 未満に設定しています。もし、プレースホルダーのテキストを完全に不透明化したい場合は、 `opacity` に `1` を設定してください。 -<h3 id="Windows_High_Contrast_Mode" name="Windows_High_Contrast_Mode">Windows 高コントラストモード</h3> +#### HTML -<p>プレイスホルダー文字列は、 <a href="/ja/docs/Web/CSS/-ms-high-contrast">Windows 高コントラストモード</a>ではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。</p> +```html +<input placeholder="既定の透明度..."> +<input placeholder="完全に不透明..." class="force-opaque"> +``` -<ul> - <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li> -</ul> +#### CSS -<h3 id="Labels" name="Labels">ラベル</h3> +```css +::placeholder { + color: green; +} + +.force-opaque::placeholder { + opacity: 1; +} +``` -<p>プレイスホルダーは {{htmlelement("label")}} 要素の置き換えではありません。 {{htmlattrxref("for", "label")}} 及び {{htmlattrxref("id")}} 属性の組み合わせを使用して入力欄とプログラム的に関連付けが行われていないラベルがないと、読み上げソフトのような支援技術が {{htmlelement("input")}} 要素を解釈できなくなります。</p> +#### 結果 -<ul> - <li><a href="/ja/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> - <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> -</ul> +{{EmbedLiveSample("Opaque_text", 200, 60)}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> - <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<div> -<p>{{Compat("css.selectors.placeholder")}}</p> -</div> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref(":placeholder-shown")}} 疑似クラスは、アクティブなプレイスホルダーを<em>持つ</em>要素にスタイルを適用できます。</li> - <li>関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> - <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> -</ul> +- {{cssxref(":placeholder-shown")}} 擬似クラスは、アクティブなプレイスホルダーを*持つ*要素にスタイルを適用できます。 +- 関連する HTML 要素: {{HTMLElement("input")}}, {{HTMLElement("textarea")}} +- [HTML フォーム](/ja/docs/Learn/Forms) |