こんにちは！Web制作の世界へようこそ。CSSを学び始めたばかりの頃って、色を変えたり配置を整えたりするだけでワクワクしますよね。
でも、少し慣れてくると「あれ？これってどうやって指定すればいいんだろう？」という、ちょっとした壁にぶつかるはずです。今日は、そんな悩みを解決する、地味だけど実はめちゃくちゃ頼りになる「`:empty`（エンプティ）擬似クラス」についてお話しします。
「名前からして空っぽの何かを選ぶやつでしょ？」という直感、大正解です！この子、本当に「中身が何もないもの」を鋭く見抜く力を持っているんですよ。
—
`:empty` は「誰もいない部屋」を見つける名人
想像してみてください。あなたは今、大きなマンションの管理管理人さんです。
「この部屋は空室かな？」と確認して回るとき、部屋の中に家具があったり、誰かが住んでいたりしたら「ここは空室じゃないな」と判断しますよね。
CSSの `:empty` も全く同じことをしています。
- 中身がある（空室じゃない）： テキストが入っている、画像がある、他のタグが入っている。
- 中身がない（空室）： 本当に何も書かれていない、改行すら入っていない。
この「本当に何もない」状態の要素だけをピンポイントで選んで、「じゃあ、君はこうなっちゃいな！」と指示を出せるのが `:empty` なんです。
—
実際に動かしてみましょう
例えば、Webサイトで「通知バッジ」や「アイコンの枠」を作っているとき、中身が空っぽのまま枠だけ表示されてしまうと、なんだか間抜けに見えてしまうことってありますよね。
そんなとき、`:empty` を使って「中身がないなら、そもそも隠しちゃおう！」という指示が出せます。
/ 中身が空っぽのときだけ、枠線を消して存在感を消す /
.notification-badge:empty {
display: none; / 中身がないなら、表示もしない！ /
}
/ ついでに、空っぽだけどスペースだけは確保したいならこう /
.box:empty {
background-color: #f0f0f0; / 空っぽの時はグレーにして「ここ空いてますよ」と見せる /
height: 50px;
}
—
ここで注意！ 初学者が一番つまずく「見えない住人」の話
ここからが、現場のアーキテクトとして皆さんにどうしても伝えておきたい「罠」の話です。
実は、`:empty` が「空っぽだ！」と判断する基準は、私たちが思う以上に厳格です。以下のコードを見てみてください。
どうでしょう？人間から見ると「どっちも空っぽじゃん！」って思いますよね。でも、コンピューターの世界では、「スペース」や「改行」も立派な「文字（テキストノード）」なんです。
もし皆さんが「あれ？ `:empty` が効かないぞ？」と悩んだら、HTMLコードの中に余計な改行やスペースが入っていないか、真っ先に疑ってみてください。「おや、誰か隠れてるな？」と気づけるようになれば、もう立派なCSS使いの第一歩です。
—
どんなときに使うのがスマート？
実務では、こんなシチュエーションでよく使います。
1. CMSで自動生成された空のタグを消す:
ブログのシステムなどが、中身がないのに `
` だけ吐き出してしまうことってよくあります。そんなとき、CSSで `:empty { display: none; }` と書いておけば、レイアウト崩れを未然に防げます。
2. ボタンの装飾:
「アイコンが入るはずのボタン」で、アイコンが読み込まれなかった時だけ、ボタン自体の余白を調整する、なんて使い方も便利です。
—
最後に：完璧じゃなくていいんです
`:empty` は、Webサイトの「お掃除役」のような存在です。完璧に使いこなさなきゃいけない！と気負う必要はありません。「あ、なんかタグだけ残っちゃって格好悪いな」と思ったとき、ふと思い出してあげてください。
「そういえば、空室を見つける名人（`:empty`）がいたな」と。
コードを書いていてうまくいかないときは、いつでもまたここに戻ってきてくださいね。Web制作の道は、そんな小さな発見の積み重ねですから。一緒にゆっくり、楽しんでいきましょう！
コメント