【入門編】 default疑似クラス – CSS実践ガイド

こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。

CSSって、最初は「色が変えられる魔法の杖」みたいで楽しいんですが、いざ自分でフォーム（お問い合わせ画面とかアンケートとか）を作り始めると、「あれ？ なんか思い通りにいかないぞ……？」って壁にぶつかりがちですよね。特に、ボタンやチェックボックスの「最初から選ばれている状態」をコントロールしようとして、夜な夜な画面を睨みつけているそこのあなた。

大丈夫ですよ、今日でそのモヤモヤは綺麗さっぱり解消させちゃいますからね！

今回は、そんなフォームの「初期値（デフォルト）」を優しく包み込んでスタイリングしてくれる、知る人ぞ知る名脇役……`:default`疑似クラスについて、徹底的に解剖していきましょう。

—

そもそも `:default` 疑似クラスってなに？（身近な例え話）

まずは難しい専門用語をいったんゴミ箱にポイしましょう。

イメージしてみてください。あなたは休日に、お気に入りのカフェでアイスコーヒーを注文しようとしています。メニュー表をめくると、いくつかのドリンクには最初から「これ、おすすめの定番（デフォルト）ですよ」という小さな印がついていますよね。特にこだわりがなければ、そのままその「定番」が選ばれることになります。

Webのフォームの世界もまったく同じです。
例えば、アンケート画面を開いたときに、性別や支払い方法のラジオボタンがあらかじめ「未回答」や「クレジットカード」にポチッとチェックが入っていること、ありますよね。

この「HTMLを書いた段階で、あらかじめデフォルトとして選ばれている要素」をピンポイントで指し示してくれるのが、今日主役の `:default` なんです。

「あれ、普通の `:checked` と何が違うの？」って思った方、素晴らしい着眼点です！
実は、`:checked` はユーザーがポチポチとクリックして後から変えた状態も含めて「今チェックがついているもの全部」を捕まえちゃうんです。一方の `:default` は、「最初からそこに用意されていた初期値のやつ」だけを正確に見つけ出す、ちょっと真面目で一途な奴なんですよ。

—

どんなときに使うの？（実務でのリアルなユースケース）

現場でこの `:default` が最高に輝く瞬間は、ずばり「ユーザーに『これは最初から選ばれているおすすめ（初期値）ですよ』と視覚的に優しく教えてあげたいとき」です。

例えば、たくさんの選択肢があるアンケートフォームで、運営側が一番答えてほしい項目や、安全な標準設定があらかじめ選ばれているとします。ユーザーが「お、これ最初から選ばれてるんだな」とひと目でわかると、迷わずにそのまま先に進めますよね。

百聞は一見にしかず。実際のコードを見てみましょう。

ほんのり優しい見た目にするサンプルコード

HTMLとCSSを組み合わせて、デフォルトで選ばれているラジオボタンをちょっとだけ特別に目立たせてみましょう。エディタを開く準備はいいですか？

ブラウザで開いてみてください。「ブレンドコーヒー」の文字だけが青くなり、後ろにひっそりと「（おすすめ）」という文字が浮かび上がってきたはずです。

もしユーザーが途中で「やっぱ紅茶にする！」と別のラジオボタンをクリックしても、CSSの見た目がガチャガチャと変わって混乱することはありません。初期値としての「安心感」をそっと演出するには、この `:default` が最高の相棒になってくれます。

—

つまずきやすいポイントと、優しく解決するコツ

ここで、初心者の人がよくハマりがちな「落とし穴」について少しだけお話ししておきますね。失敗は成功の母、あらかじめ知っておけば怖くありません！

1. 「あれ、効かない？」と思ったら、HTMLの `checked` を確認しよう

`:default` は、文字通り「ブラウザが読み込んだ瞬間（初期状態）にどうなっているか」を判定します。
つまり、HTMLのタグの中に `checked`（チェックボックスやラジオボタンの場合）や `selected`（プルダウンメニューの場合）がちゃんと書かれていないと、CSS側でいくら `:default` と叫んでも、「え、どれがデフォルトかわかんないよ……」と無視されてしまいます。

2. リセットボタンを押したときの挙動に感動する

これ、実務をやっていて「おっ」と嬉しくなるポイントなんですが、``（フォームの内容を初期状態に戻すボタン）が押されたとき、ブラウザは要素を「最初の状態」に巻き戻しますよね。
このとき、ユーザーがいじり倒してバラバラになったフォームが、`:default` のスタイルを伴ってパッと「初期状態」に復帰する瞬間は、見ていて結構気持ちいいものです。

—

チーフアーキテクトからのまとめ

CSSの疑似クラスって、数が多いし名前も似ているから、最初は覚えるのが大変ですよね。
でも、今日お話しした `:default` のように、「あ、これって現実世界の『お勧めの初期設定』を優しく教えてあげるためのものなんだな」とストーリーで捉えてあげると、途端にコードを書くのが楽しくなってきます。

完璧なコードを一発で書こうなんて思わなくて大丈夫です。まずは自分のエディタに今回のコードを貼り付けて、色を変えてみたり、文字をいじってみたりして、ブラウザとの対話を楽しんでみてくださいね。

あなたのWeb制作の旅が、今日も明日もワクワクするものでありますように。それでは、また別の現場でお会いしましょう！