【入門編】 :placeholder-shown 擬似クラス – CSS実践ガイド

こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。

CSSを書き始めたばかりの頃って、次から次へと出てくるプロパティやセレクタに「うわ、また新しいの覚えなきゃいけないの…？」と、ちょっとめまいがしてしまいますよね。大丈夫です、安心してください。一歩ずつ、目の前の便利な道具を自分のものにして行けばいいんです。

さて、今回スポットライトを当てるのは `:placeholder-shown`（プレースホルダー・ショーン） という、ちょっと長い名前の擬似クラス。

これ、名前は厳めしいですが、知っているとフォームのデザインが一気に垢抜ける、すごく頼りになる相棒なんです。一体どんなことができるのか、身近な例えから優しく紐解いていきましょうね。

—

想像してみてください。街のおしゃれなカフェに入って、注文用のタブレット端末を見つけました。
まだ何も入力していない画面には、薄い文字でこんな風に書いてありますよね。

> 「例：アイスカフェラテ（無脂肪乳）」

これが、入力欄の「プレースホルダー」です。
私たちがお客さんとしてその席に座り、まだ何も文字を打ち込んでいない時、この案内書きは「はい、ここに何か書いてくださいねー」と優しく語りかけてくれます。

でも、私たちが実際に「ブレンドコーヒー」と文字を打ち始めた瞬間、この案内書きの役目は終わり、スッと消えてくれますよね。

この「案内書き（プレースホルダー）がまだ画面に表示されている状態の入力欄そのもの」を、CSSの魔法でこっそり捕まえて、「おっ、まだ何も入力されてないな？」と検知してくれるのが、今日主役の `:placeholder-shown` なんです。

—

Webサイトを作っていて、こんなデザインを求められたことはありませんか？

昔のCSSだと、これを実現しようとするとJavaScriptの力を借りる必要がありました。「ユーザーがキーボードを叩いたか監視して、クラスを付け替えて……」うーん、ちょっと大げさですよね。

それを、CSSのたった数行だけで、JavaScriptを使わずにスマートに解決してしまうのが `:placeholder-shown` のすごいところ。プレースホルダーが表示されている＝「まだ何も入力されていない状態」という事実を、CSSだけで見抜けるようになったのです。

—

百聞は一見にしかず。エディタを開いて、こんな風に書いてみてください。

お名前

/ プレースホルダーが表示されている（＝何も入力されていない）とき /
input:placeholder-shown {
background-color: #fff5f5; / ほんのり薄い赤色にして未入力をアピール /
border: 2px dashed #ffb1b1;
}

/ 文字が入力されてプレースホルダーが消えたとき /
input:not(:placeholder-shown) {
background-color: #f0fff4; / ほんのり薄い緑色に変化！ /
border: 2px solid #38a169;
}

これだけで、ユーザーが文字を打ち始めた瞬間に、入力欄の背景色やボーダーがパッと切り替わるインタラクティブなフォームが完成します。すごい手軽だと思いませんか？

—

ここで、初学者の人が一番ハマりがちな罠をこっそりシェアしておきますね。

「よし、じゃあプレースホルダー自体の文字の色や大きさを変えたくなったぞ。`input:placeholder-shown` の中に文字の色を書けばいいんだな！」

……実はこれ、間違いなんです。

`:placeholder-shown` は、「プレースホルダーが表示されている入力欄（input）そのもの」を選ぶセレクタです。
プレースホルダーの「文字そのもの」の見た目（文字色やフォントサイズなど）を変えたいときは、別の専用のパーツ（擬似要素）である `::placeholder` を使います。

この2つ、名前が似ているので最初は頭がこんがらがりますが、こう整理すると覚えやすいですよ。

—

`:placeholder-shown`、いかがでしたでしょうか？

最初は呪文のように見えたかもしれませんが、「まだ何も入力されてなくて、案内が出ている状態のボックスね」と心の中で日本語に翻訳してあげると、グッと親しみやすくなったはずです。

フロントエンドの世界は、こうした小さな「知っていると得するテクニック」の積み重ねでできています。完璧に覚えられなくても、必要になったときに「あ、そういえばあんな書き方があったな」と思い出して、このブログに戻ってきてくれたらそれだけで大成功です。

あなたのWeb制作の引き出しが、また一つパチッとスマートに閉まりましたね。
それでは、次のコードの旅へいってらっしゃい！