今回はお問い合わせフォームなどのユーザー記入欄のボックスに薄らとした例文（プレースホルダ）を表示させる方法を紹介します。
例文（プレースホルダ）とは下記のようなお問い合わせの記入欄があった場合の「00-0000-0000」と予め薄らと入力されている薄い文字（案内文字）の部分の事です。
この例文（プレースホルダ）は、実は技術者が任意で表示させている部分です。これがある事でユーザーは電話番号に「-（ハイフン）」が必要かどうかが一目で分かるので気の利いたWEBサイトといった印象になるかと思います。しっかり理解してユーザーに優しいフォームを作成しましょう。（超簡単）
プレースホルダの記述の仕方
プレースホルダはinput要素で作るテキスト入力ボックスの中にHTMLのplaceholder属性を加えて、そこに任意の文字を入れるだけと非常に簡単に出来ます。
実際の記述は下記のようになります。
<div>ユーザー記入欄：<input placeholder="ここに案内文字を入れる" type="text" value="" style="width:auto;"></div>見た目は下記のようになります。
placeholder属性は、ブラウザによって動作の仕方は多少異なるが見た目はほとんど同じなので安心して下さい。
プレースホルダテキストにスタイルを指定する方法
プレースホルダテキストにスタイルを指定するには「::placeholder」のように疑似クラスを使用すれば可能です。例えば下記のように案内文字を赤くしたい場合は「::placeholder」に対してcolorを指定すれば可能です。
HTML
<div class="sample">ユーザー記入欄：<input placeholder="ここに案内文字を入れる。" type="text" value="" style="width:auto;"></div>CSS
.sample ::placeholder {
color:rgba(255, 0, 0, .5);
}上記の擬似クラスの書き方ではブラウザによってはスタイルが効かない（対応していない）場合があるので下記のようにベンダープレフィックスも併用しての記述の方が良いかと思います。（2020/05/08段階では。いずれは擬似クラスのみでも大丈夫になる予定。）
/* IE10・IE11対応用 */
.sample :-ms-input-placeholder {
color: rgba(255, 0, 0, .5);
}
/* Chrome・Safari・Opera対応用(Edgeでも有効) */
.sample ::-webkit-input-placeholder {
color: rgba(255, 0, 0, .5);
}
/* Firefox19以上用 */
.sample ::-moz-placeholder {
color: rgba(255, 0, 0, .5);
opacity: 1;
}
/* CSS4標準予定の記述 */
.sample ::placeholder {
color: rgba(255, 0, 0, .5);
}プレースホルダのUI/UXに気を付けよう
冒頭でも言ったようにプレースホルダは正しく使えばユーザーも分かりやすくなり気の利いたWEBサイト（お問い合わせフォーム）になるかと思います。しかし少し間違った使い方をすると非常に分かり辛くユーザーを困らせてしまう作りになってしまうという点は意識していかなくてはいけません。
例えば、下記の様なプレースホルダはダメな例です。
①は条件がプレースホルダ内に…後で確認出来ない
②は「ID」と言うラベルのように使ってしまってる例です。しかも確認の必要そうな条件もプレースホルダ内に…
プレースホルダはユーザーが記入を始めると見えなくなります。上記2つの例の使い方だと全てのフォーム項目を入力し終わった後にユーザーが内容の不備などを確認する事が出来ません。ユーザーが内容を確認するには入力したテキストを消していかなくてはいけません。
このような状態はユーザーに対して非常に不親切なサイトかと思います。
プレースホルダを使用する際は、下記のようにあくまで例文を表示させてユーザーの認識を照合してあげるような使い方にしましょう。そして確認が必要そうなラベルと条件は必ず常に見える箇所に通常テキストで表示させましょう。
以上が「フォームの記入欄ボックスに薄らとした例文を表示させる方法」でした。
ユーザーに親切なサイト作りに答えはないがGoogleが検索結果の評価で重視してる点です。フォーム一つでもしっかりとユーザーファーストな考えを持ち、気遣いのあるサイトにしていきましょう。このような施策や考え方がPV数や検索結果の上昇に繋がっていきます。
