こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り続けているチーフアーキテクトの私です。
CSSを書き始めたばかりの頃って、`hover`や`focus`といった「お馴染みの動き」だけでもいっぱいいっぱいになりますよね。「あれ、思った通りにスタイルが当たらないぞ…」なんて画面の前で頭を抱えた経験、誰しも一度や二度ではないはずです。
大丈夫ですよ、安心してください。今日お話しするのは、そんなCSSの迷子になりがちな初心者さんの救世主、そして実務でも「これを知ってると一目置かれる」隠れた名機能、`:placeholder-shown`（プレースホルダー・ショーン） 疑似クラスです。
難しそうな名前がついていますが、要するに「今、入力欄にプレースホルダー（うっすらと見えるガイドの文字）が出ている状態」をピンポイントで捕まえるための魔法の呪文です。
今日は、身近な例えを交えながら、この子と仲良くなる方法を一緒に優しく紐解いていきましょう！
—
1. プレースホルダーって、そもそもどんな存在？
お買い物をするときに、書類の記入欄を思い浮かべてみてください。「お名前」という欄に、うすーく『例：山田 太郎』って書いてあること、ありますよね。あれがプレースホルダーです。
「ここに何を書けばいいの？」という道しるべをそっと教えてくれる、親切な案内人みたいな存在です。
でも、私たちが文字を入力し始めると、この案内人はスッと消えて、代わりに私たちが入力した文字が主役に躍り出ますよね。
CSSの `:placeholder-shown` は、まさに「案内人（プレースホルダー）がまだそこに立って、お仕事をしている状態」の入力欄（inputやtextarea）をこっそり見つけて、「おーい！」と手を振ってスタイルを教えてあげるための疑似クラスなんです。
—
2. なぜ `:placeholder-shown` がすごいの？（実務でのリアルな話）
「プレースホルダーのデザインを変えるだけなら、`::placeholder` があるじゃない？」と思ったそこのあなた。なかなか鋭いですね！
確かに、文字の色を変えたりフォントをいじったりするだけなら `::placeholder` で事足ります。しかし、`:placeholder-shown` が真価を発揮するのは、「入力欄そのものの見た目を、文字が入っているかどうかで変えたいとき」なんです。
例えば、実務の現場でこんな要望をよくもらいます。
> 「ねえ、ユーザーがまだ何も入力していない時は、入力欄の枠線を赤っぽくして目立たせて、文字を入力し始めたら普通の枠線に戻してほしいんだよね」
これ、昔のCSSだとJavaScriptの力を借りないと実装できなくて、けっこう面倒くさかったんです。
でも、`:placeholder-shown` さえいれば、CSSだけでこれがスマートに実現できちゃいます。すごいでしょ？
—
3. 実際にコードを書いてみましょう！
百聞は一見にしかず。みんな大好き、コピペしてすぐにブラウザで動かせるコードを用意しました。エディタの新しいファイルにペタッと貼り付けて、動きを確認してみてくださいね。
動きを試してみるポイント
1. 画面を開いた瞬間、入力欄がうっすら赤い背景になり、枠線も赤くなっていますよね？これは「プレースホルダーが表示されているよ（＝まだ何も書かれていないよ）」というサインです。
2. クリックして、何か文字をキーボードで打ってみてください。
3. 文字が1文字でも入力された瞬間、プレースホルダーが消え、CSSの指定が外れてスッと爽やかな青い枠線と白い背景に戻ります！
どうですか？JavaScriptを1行も書いていないのに、入力状態によってデザインがダイナミックに変わるのが体感できたと思います。
—
4. つまずきやすいポイントと、優しく寄り添うアドバイス
ここで、初心者の人がよくハマりがちな「落とし穴」をこっそり共有しておきますね。
「あれ？ スタイルが当たらない……」と思ったときは？
- 原因1：そもそも `placeholder` 属性を書き忘れていませんか？
`:placeholder-shown` は、HTML側に `placeholder=”…”` がしっかり設定されていないと機能しません。まずはHTMLを疑ってみましょう。
- 原因2：CSSのセレクタの書き順や強さに負けていませんか？
例えば、普通の `.cute-input` で `border` をべったり上書きしていると、疑似クラスの強さに負けてしまうことがあります。そんなときはセレクタの組み合わせを調整してあげてくださいね。
—
おわりに
CSSの疑似クラスって、最初は英語の専門用語ばかりで呪文のように見えるかもしれません。でも、一つひとつの意味を「現実世界のモノや状態」に置き換えてみると、途端に可愛らしく、そして頼もしい相棒に見えてきます。
`:placeholder-shown` も、ユーザーが気持ちよく入力フォームを使えるようにそっと手助けしてくれる、とっても優しくて便利な機能です。
今日のコードをベースに、枠線の色を変えてみたり、アニメーションをつけてみたり、自由に遊んでみてくださいね。あなたのWeb制作の引き出しが、また一つ増えたお祝いができたら嬉しいです。
それでは、また次のCSSの冒険でお会いしましょう！チーフアーキテクトの私でした。良きコードライフを！
コメント