プレースホルダーとは

入力欄が空のときだけ薄く表示される、入力例やヒントの文字。入力を始めると消える。

概要

入力欄が空のときだけ薄いグレーで表示され、入力を始めると消える文字です。<input> や <textarea> の placeholder 属性を指定するだけで実装でき、「例:yamada@example.com」のように入力形式の見本を示す用途でよく使われます。ただし文字は入力を始めた瞬間に消えてしまい、色も薄くコントラストが低いため、何の欄かを示す役割は <label> に任せ、プレースホルダーはあくまで補助的なヒントとして使います。

別名

表記ゆれ:入力例、ヒントテキスト、placeholder

「プレースホルダー」は「一時的に場所を埋めるもの」という意味の英語で、入力欄以外(画像が読み込まれるまでの仮表示など)にも使われる広い言葉です。

AI への伝え方

「メール欄にプレースホルダーで入力例を出して」のように伝えます。ラベルを省略してプレースホルダーだけで欄の意味を示す実装は避けたい旨を明記すると、入力中にヒントが消えて何の欄か分からなくなる問題を防げます。

似たパーツとの違い

「テキスト入力欄」との違いは役割で、プレースホルダーは入力欄を構成する一部品(属性)であり、単独では機能しません。ラベルの代わりに使うと、入力を始めた瞬間にヒントが消えて何の欄か分からなくなるため、必ず <label> と併用します。 「フローティングラベル」はラベル自体が入力欄の中から上に浮かび上がる表現で、入力後も見出しが残り続ける点がプレースホルダーと異なります。

デモ

ラベルは常に表示されたまま残り、プレースホルダーは入力を始めると消えます。

コード

HTML
<div class="placeholder-demo">
  <div class="placeholder-demo__field">
    <label class="placeholder-demo__label" for="placeholder-demo-email">メールアドレス</label>
    <input class="placeholder-demo__input" type="email" id="placeholder-demo-email" placeholder="例:yamada@example.com" />
  </div>
  <p class="placeholder-demo__note">
    ラベルは常に表示されたまま残り、プレースホルダーは入力を始めると消えます。
  </p>
</div>
CSS
.placeholder-demo {
  font-family: sans-serif;
  max-width: 320px;
}

.placeholder-demo__field {
  display: flex;
  flex-direction: column;
}

.placeholder-demo__label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.placeholder-demo__input {
  padding: 10px 12px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
}

.placeholder-demo__input::placeholder {
  color: #999;
}

.placeholder-demo__input:hover {
  border-color: #666;
}

.placeholder-demo__input:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

.placeholder-demo__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #666;
}