こんにちは。CSSという広大な森へようこそ。
HTMLという骨組みに、CSSで命を吹き込む……。Web制作はまるで、真っ白なキャンバスに絵を描くようなワクワクする体験ですよね。でも、いざ進めていくと「あれ？ 思った通りにならない！」と壁にぶつかることも多いはず。
今日は、そんなCSSの世界にある「`:blank`（ブランク）という、ちょっとミステリアスな擬似クラス」について、お話ししようと思います。
—
空っぽなのに、空っぽじゃない？
皆さんは、Webサイトでアンケートフォームや入力欄を作ったことはありますか？
ユーザーに名前や住所を入れてもらうあの四角い箱です。
たまに、ユーザーさんがうっかり「スペースキー」だけをポンと押して送信しちゃうこと、ありますよね。見た目は何も入力されていないように見えても、プログラムの世界では「スペース（空白）」という文字が一つ入っている。これ、実は私たちエンジニア泣かせの「見えない敵」なんです。
そんな時、「中身が何もない、あるいは空白だけが入っている状態の要素をピタッと見つけ出したい！」という願いを叶えるために提案されたのが、この `:blank` 擬似クラスです。
`:blank` はどんな魔法をかけられるの？
イメージしてみてください。あなたは図書館の司書さんです。
本棚に並んでいる本（要素）をチェックして、「中身が真っ白な本」を見つけ出し、そこに「ここは記入漏れですよ！」と赤い付箋を貼るような作業。これをCSSだけで自動的に行えるようにするのが `:blank` の役割です。
もしこれが完璧に動けば、こんな風に書けるはずでした。
/ 「もし中身が空っぽ（または空白のみ）なら、枠線を赤くして目立たせよう」 /
input:blank {
border: 2px solid red; / 注意喚起の赤い枠 /
background-color: #fff0f0; / 少しだけ背景色を薄い赤に /
}
「お、これならエラーチェックが楽になるぞ！」と思いますよね。でも、ここで一つ、現場の厳しい現実をお伝えしなければなりません。
実は、まだ「魔法の修行中」なんです
少し悲しいお知らせですが、今のブラウザの世界において、`:blank` は「まだ広くは使えない」という状況です。
多くのブラウザでは、まだこの機能を正式にサポートしていません。つまり、先ほどのコードを書いても、多くのユーザーさんの画面では「え？ 何も変わらないよ？」という結果になってしまうんです。
なぜサポートされないの？
CSSの新しい機能は、W3Cという組織が「これ、みんなで使えるようにしよう！」とルールを決めてから、各ブラウザ（ChromeやSafariなど）の開発チームが実装していきます。`:blank` は、そのルール作りの中で「どう定義するのが一番使いやすいか？」を今まさに議論し、調整している最中なんです。
今、私たちはどうすればいいの？
「じゃあ、この機能が使えるようになるまで指をくわえて待つしかないの？」
……いいえ、そんなことはありません。Web制作の現場では、「今できること」で代用するのがプロの知恵です。今のところ、中身が空かどうかを判定するには、JavaScriptという「動き」を担当する言語でチェックするのが一般的です。
「CSSだけでやりたかったのに！」と思うかもしれませんが、大丈夫。今はJavaScriptという頼れる相棒に任せて、CSSは「見栄えを整えること」に集中しましょう。
代替案：CSSで「空じゃない時」をスタイリングする
`:blank` の代わりに、逆に「中身が入力されているかどうか」でデザインを変える `:placeholder-shown` という擬似クラスが既に使えます。
/ 入力欄に何も入っていない（プレースホルダーが見えている）時 /
input:placeholder-shown {
border: 1px solid #ccc;
}
/ 何か文字が入力された時 /
input:not(:placeholder-shown) {
border: 2px solid green; / 入力されたら緑色で安心感を！ /
}
最後に：CSSの進化は止まらない
`:blank` のような「まだ使えない機能」を知ることは、決して無駄ではありません。むしろ、「今は何ができて、何ができないのか」を把握していることこそ、一流のエンジニアへの第一歩です。
CSSは日々進化しています。昨日までできなかったことが、明日にはできるようになる。そんなワクワクする業界に、皆さんは飛び込んだんです。
今は `:blank` が使えなくても、近い将来、当たり前のように使える日が来るはずです。その時、「あ、昔ブログで読んだあの機能だ！」と思い出してもらえたら、私は最高に嬉しいです。
焦らず、一歩ずつ。皆さんのコードが、誰かの使いやすいWebサイトを支える日が来ることを、心から応援しています。また、何か分からないことがあればいつでも聞きに来てくださいね！
コメント