---
title: '::placeholder'
slug: 'Web/CSS/::placeholder'
tags:
  - CSS
  - Experimental
  - Reference
  - フォーム
  - 疑似要素
translation_of: 'Web/CSS/::placeholder'
---
<div>{{CSSRef}}</div>

<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>

<pre class="brush: css no-line-numbers">::placeholder {
  color: blue;
  font-size: 1.5em;
}</pre>

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

<div class="note">
<p><strong>メモ:</strong> 多くのブラウザーでは、プレイスホルダー文字列の外見は既定で半透明または明るい灰色です。</p>
</div>

<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">&lt;input placeholder="何か入力してください！"&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p>

<h3 id="Green_text" name="Green_text">緑のテキスト</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush:html line-numbers language-html">&lt;input placeholder="何か入力してください..."&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css">input::placeholder {
  color: green;
}
</pre>

<h4 id="Result_2" name="Result_2">結果</h4>

<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<h3 id="Color_contrast" name="Color_contrast">色のコントラスト</h3>

<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>

<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>

<h4 id="Usability" name="Usability">使用性</h4>

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

<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>

<pre class="brush:html line-numbers language-html">&lt;label for="user-email"&gt;Your email address&lt;/label&gt;
&lt;span id="user-email-hint" class="input-hint"&gt;Example: jane@sample.com&lt;/span&gt;
&lt;input id="user-email" aria-describedby="user-email-hint" name="email" type="email"&gt;
</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>

<h3 id="Windows_High_Contrast_Mode" name="Windows_High_Contrast_Mode">Windows 高コントラストモード</h3>

<p>プレイスホルダー文字列は、 <a href="/ja/docs/Web/CSS/-ms-high-contrast">Windows 高コントラストモード</a>ではユーザーが入力した文字列と同じスタイルで表示されます。これは人によっては、中身が入力されたものか、それとも中身がプレイスホルダー文字列かを見分けることが難しくなります。</p>

<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>

<h3 id="Labels" name="Labels">ラベル</h3>

<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>

<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>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div>
<p>{{Compat("css.selectors.placeholder")}}</p>
</div>

<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>