こんにちは！フロントエンドの現場を渡り歩いてきた、ちょっとCSSにうるさいおじさん…いや、あなたの専属チーフアーキテクトです。
日々、Webサイトを作っていて、「あぁ、ここをもう少しユーザーに優しくしたいのになぁ」ってもどかしく思う瞬間、ありませんか？ 例えば、お問い合わせフォームの必須項目が空っぽのときに、「ここ書いてないよ！」って優しく教えてあげたいとき。これまではJavaScriptの力を借りてゴリゴリ書くのが定番でした。
でもね、これからはCSSだけでもっとスマートに、もっと自然に表現できる時代がやってきているんです。
今回は、そんな未来をちょっと先取りする、ワクワクする機能「`:blank` 疑似クラス」について、一緒にゆっくり紐解いていきましょう！難しい言葉は抜きにして、身近な例えから入るから、肩の力を抜いて読んでいってくださいね。
—
1. `:blank` 疑似クラスって、なんなの？
いきなり専門用語が出てくると身構えちゃうかもしれませんが、安心してください。言葉の通り、「中身が空っぽ（ブランク）のとき」に働いてくれる、CSSのちょっとした「おせっかい屋さん（褒め言葉です）」だと思ってください。
身近な例え話にお付き合いください。
スーパーのレジ待ちの行列を想像してみてください。
カゴの中に商品がちゃんと入っている人と、カゴがスッカラカンの人が並んでいたとします。店員さんから見たら、「あ、この人はまだお買い物中（あるいは買うものがない）だな」って一目でわかりますよね。
Webの世界でも同じです。
ユーザーがフォームの入力欄（テキストボックスなど）に、文字を何も打ち込んでいない状態。つまり「カゴがスッカラカン」の状態のときだけ、CSSに「ちょっと教えて！」と教えてあげるのが、この `:blank` 疑似クラスの役割なんです。
どんなときに役に立つの？
- 「あ、ここまだ何も書いてないですよー」と、ほんのり枠線を赤くしてそっと教えてあげたいとき
- 何も入力されていないときだけ、特別な背景色やアイコンを出してあげたいとき
これまでなら「JavaScriptで入力値の長さを測って……」とコードを書いていた処理が、CSSという「見た目を整える専門家」にお任せできるようになる、とっても夢のある機能なんです。
—
2. 実は、まだ「未来の技術」なんです
ここで一つだけ、現場のプロとして大事な裏話をさせてください。
実はこの `:blank` 疑似クラス、現在のCSSの仕様書ではまだ策定の真っ最中、あるいはブラウザによってはおそるおそる実験的に実装されている段階（実験的機能）です。
「えっ、じゃあ今使えないの？」ってガッカリしました？
大丈夫です！こういう最新の潮流を知っておくだけで、あなたの引き出しは何倍も深くなりますし、将来標準化されたときに「おっ、さすが！」と周りから一目置かれるエンジニアになれます。今のうちに仕組みだけでも優しくマスターしておきましょう。
—
3. 実際にコードの雰囲気を覗いてみよう
百聞は一見に如かず。実際にどんな風に書くのか、未来のコードを覗き見してみましょう。
/
【未来の書き方】
もし input の中身が空っぽ（blank）だったら、
枠線をちょっと優しく赤色にして、背景をほんのり染めてみよう
/
input:blank {
border: 2px dashed #ff6b6b; / 優しめの点線にするのがポイント /
background-color: #fff5f5; / ほんのりピンク色に /
}
/
逆に、何か文字が入力されたら普通の見た目に戻るよ
/
input:not(:blank) {
border: 2px solid #51cf66; / ちゃんと書けたら安心のグリーンに /
background-color: #ffffff;
}
どうですか？コードの香りがすごく直感的で分かりやすいですよね。「中身が空っぽのときはこうしてね」という指示が、英語の文章を読むようにスーッと頭に入ってくるはずです。
—
4. よくある勘違い：「:empty」と何が違うの？
CSSを少し触ったことがある人なら、`:empty` というよく似た名前の疑似クラスに出会ったことがあるかもしれません。
「あれ？ 中身がないっていう意味なら、`:empty` と一緒じゃないの？」
ここ、初学者が本当につまずきやすいポイントなんですが、すごく大切な違いがあります。現場でもよく議論になる所なので、ここでスッキリクリアにしておきましょう！
- `:empty`（エンプティ）
- 要素の中に、HTMLのタグやテキストの子供が「一文字も存在しない」状態を指します。
- 例：`
` のように、タグの間にスペースすらない状態。
- `:blank`（ブランク）
- 人間にとって「視覚的に空っぽに見える」状態を指します。
- 例えば、input要素にはそもそもHTMLの子供要素は書きませんが、ユーザーがキーボードで文字を打っていませんよね。そういう「ユーザーの入力値が空っぽ」という状態を見抜いてくれるのが `:blank` です。
要するに、HTMLの構造的な「からっぽ」を見たいときは `:empty`、ユーザーがフォームに入れた情報の「からっぽ」を見たいときは `:blank` と使い分ける（あるいは `:blank` がその役割を担う）というわけです。
—
5. つまずきやすいポイントと、そっと寄り添うアドバイス
新しい技術や、まだ実験段階の機能を勉強していると、どうしてもこんな壁にぶつかります。
> 「あれ？ 自分のパソコンのブラウザで動かしたのに、全然スタイルが変わらないよ……？ 私の書き方が悪いのかな？」
……どうか自分を責めないでくださいね！これ、あなたのコードが間違っているわけではないケースがほとんどです。
先ほどもお伝えした通り、`:blank` はまだすべてのブラウザが完全に仲間にしているわけではありません。そのため、今日の明日ですぐに本番のWebサイトでバリバリ使うのは、少しだけ待ったほうがいい場面もあります。
でも、安心してください。
「今はこういう次世代の便利機能が育っているんだな」「将来、フォームのバリデーション（入力チェック）がもっとCSSだけで手軽になるんだな」という未来の地図を頭に入れておくことが、何よりも大きな財産なんです。
実際に現場で今すぐ同じようなことをやりたい場合は、先輩たちは `:placeholder-shown` という、プレースホルダー（入力欄のうっすらした文字）が表示されている状態を狙う疑似クラスを工夫して使ったりしています。こうした代替案も含めて、フロントエンドの世界は知れば知るほど奥が深くて面白いですよ。
—
おわりに
今回は、未来のCSSのスター候補である `:blank` 疑似クラスについてお話しました。
- ユーザーの入力欄が「空っぽ（スッカラカン）」のときに働いてくれるお助け機能
- まだ実験的な機能だけど、将来のWeb制作を間違いなく便利にしてくれる技術
- `:empty` とは見る視点（構造か、入力値か）が違うこと
最初は「難しそうだな」と感じた技術も、こうして身近な例えと一緒になぞっていくと、なんだか少し友達のように感じられてきませんか？
焦らず、自分のペースで、一歩一歩進んでいけば大丈夫です。
あなたのWeb制作の旅が、これからも楽しくワクワクするものでありますように。チーフアーキテクトの私メは、いつでもあなたの味方ですよ！
コメント