プレースホルダーの文字が切れる・見えないときの対処

文字が縦に切れるのは高さと行揃えが原因

プレースホルダーの上下が切れる場合、入力欄の高さに対して文字が中央に揃っていないことが多いです。heightを固定しつつline-heightが合っていないと、文字が上や下にずれて見切れます。

高さを固定するならline-heightを高さと近い値に合わせるか、heightを使わずpaddingで上下の余白を作る方法が安定します。後者なら文字量や行数が変わっても切れにくくなります。

横に切れるのは幅とoverflowの問題

長いプレースホルダーが途中で消える場合、入力欄の幅が足りていません。文章を短くするか、入力欄の幅を広げるのが基本対応です。レスポンシブで幅が縮む画面では特に起きやすくなります。

テキストが省略されて見えるときは、短く要点を絞った文言にするのが結局いちばん親切です。プレースホルダーは補助であり、必須情報はラベルやヘルプテキストで別途示しましょう。

症状別チェック表

プレースホルダーの文字が切れる・見えないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

薄すぎて読めないのは色コントラスト不足

プレースホルダーはブラウザ標準でやや薄いグレーになります。背景が白以外だったり、さらに薄い色を指定したりすると、コントラストが不足して読めなくなります。::placeholder擬似要素でcolorを調整しましょう。

色を変えても効かないときは、ベンダー固有の指定が残っていないか、より詳細度の高い別ルールに上書きされていないかを確認します。複数のCSSが当たっている画面では、意図しないルールがプレースホルダーの色を戻していることがあります。

アクセシビリティの観点では、プレースホルダーにも十分なコントラストが望まれます。ただしプレースホルダーは入力すると消えるため、ラベルの代わりにせず、あくまで補足として使うのが安全です。

見やすく直す手順

縦切れ・横切れ・色の3観点を順に確認すると、原因を素早く特定できます。

1. heightとline-heightの関係を見直し、必要ならpadding方式に変える
2. 入力欄の幅に対して文言が長すぎないか確認し、短くする
3. ::placeholderでcolorを調整し、背景とのコントラストを確保する
4. ラベルやヘルプテキストで必須情報を別途示す
5. 狭い画面幅でも切れないかレスポンシブで確認する

見え方は実機の画面幅で確認する

プレースホルダーの切れや薄さは、画面幅やOSのフォント描画に左右されます。デザインデータ上では問題なくても、実際の入力欄で見ると印象が変わることがあります。実際の表示を関係者と見比べて調整するのが確実です。

ギガサイト便なら、検証用のフォームHTMLをドロップして発行された〇〇.giga-site.comのURLを、各自のスマホやPCで開いて見え方を確認できます。CDNのエッジ配信で表示が速く、同じURLのまま文言や色を差し替えながら詰められます。社外に見せたくない段階の検証はパスワードやメール認証を併用しましょう。