【CSS】擬似要素の「::placeholder」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似要素の「::placeholder」の使い方について解説します。

「::placeholder」って何？？

このような方が対象です。

また、下の動画でも擬似要素の「::placeholder」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

擬似要素の「::placeholder」を使うと何ができるのか？

擬似要素の「::placeholder」を使うと、「プレイスホルダー文字列」にスタイルを当てることができます。

ふむふむ。

「プレイスホルダー文字列」とは？

<label for="namae">名前</label>
<input type="text" id="name" name="name" placeholder="ほんだ　ごろう"><br>

<label for="profession">職業</label>
<input type="text" id="name" name="profession" placeholder="研究者">

「プレイスホルダー文字列」とは、「未入力の入力欄」に表示する「ユーザーに期待する入力例」のことです。

薄い文字で表示されていて、ユーザーが何が入力すると消えるやつですね。

「input type=”text”」もしくは「textarea」に「placeholder属性」をつけることで表示することができます。

「擬似要素の基本的な使い方」については下記の記事で丁寧に解説しています。もし「擬似要素の基本的な使い方」について知りたい方は下記の記事をお読みください！

擬似要素の「::placeholder」の簡単な使用例！

<label for="namae">名前</label>
<input type="text" id="name" name="name" placeholder="ほんだ　ごろう"><br>

<label for="profession">職業</label>
<input type="text" id="name" name="profession" placeholder="研究者">

::placeholder {
    color: pink;
}

このように「プレイスホルダー文字列」の色を変更したりする際に使われますかね。

「プレイスホルダー文字列」と実際の入力は区別するべし

「プレイスホルダー文字列」はユーザーが入力したものではないので、「実際の入力との区別」が分かりやすいようなスタイルにすることを推奨します。

大体は、薄い文字になっていますよね。実際の入力よりも。

もし似たようなデザインだと、未入力に気づかない可能性が上がるので、これを避けるべきだと思いますね。

使用上の注意点！

擬似要素の「::placeholder」を使う際の注意点も書いておきますね！

「プレイスホルダー文字列」の「opacity」に気をつける

「Firefox」などの一部のブラウザーでは、「プレイスホルダー文字列」の「opacity」が１未満に設定されています。

なので、「::placeholder」で文字色を薄く設定している場合は、「opacity: 1」と指定しておくのがいいでしょう！

なるほどね！

参考リンク。

仕様書。
https://drafts.csswg.org/css-pseudo/#placeholder-pseudo

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder

あわせて読みたい記事。

まとめ

擬似要素の「::placeholder」を使うと、「プレイスホルダー文字列」にスタイルを当てることができる。

「プレイスホルダー文字列」とは、「未入力の入力欄」に表示する「ユーザーに期待する入力例」のこと。

「input type=”text”」もしくは「textarea」に「placeholder属性」をつけることで表示することができる。

「プレイスホルダー文字列」はユーザーが入力したものではないので、「実際の入力との区別」が分かりやすいようなスタイルにすることを推奨する。

「Firefox」などの一部のブラウザーでは、「プレイスホルダー文字列」の「opacity」が１未満に設定されているので注意が必要。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似要素の「::placeholder」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！