やあ。CSSの世界へようこそ。
フロントエンドの深淵を覗き込んでいる君に、今日はちょっとした魔法の話をしよう。
CSSを書いていると、「ボタンを押したとき」や「チェックを入れたとき」に、画面の見た目をガラッと変えたくなる瞬間があるよね。JavaScriptで複雑なプログラムを書かなきゃいけないのかな……と身構える必要はない。実はCSSには、その状態をそっと見守り、瞬時に反応してくれる「魔法の杖」があるんだ。
それが今回紹介する `:checked` という擬似クラスだ。
—
そもそも「擬似クラス」ってなんだろう？
専門用語でつまずくのは一番もったいない。擬似クラスっていうのは、「要素の『状態』を指すためのラベル」だと思ってほしい。
例えば、普段の君は「人間」という要素だ。でも、「お腹が空いているとき」とか「眠いとき」という状態があるよね。`:checked` は、HTMLのチェックボックスやラジオボタンに対して、「おっ、今この子、チェックが入ってるな！」とCSSがこっそり見抜いて、その状態のときだけ特別な化粧を施してくれる仕組みなんだ。
—
身近な例え：お買い物の「ギフトラッピング」
想像してみてほしい。君が雑貨屋さんでプレゼントを買ったとする。
お店のレジで「ギフトラッピングにしますか？」と聞かれて、「はい（チェック）」と答えたら、店員さんが素早く箱を包んでリボンをかけてくれるよね。
この「はい」と答えた瞬間＝ `:checked` がONになった瞬間だ。
CSSでもこれと同じことができる。
/ 普段はリボンが見えない（透明にしておく） /
.present-box::after {
content: “🎀 リボン付き！”;
opacity: 0;
transition: 0.3s;
}
/ チェックが入った瞬間、魔法が発動する /
.gift-checkbox:checked + .present-box::after {
opacity: 1; / 見えるようになる /
color: #ff6b6b;
font-weight: bold;
}
このコードのポイントは `+` という記号だ。これは「隣接セレクタ」といって、「チェックボックスのすぐ隣にある要素」を指し示す。これだけで、JSを一行も書かずに「スイッチ」が作れてしまうんだ。
—
なぜこれが「伝説的」に便利なのか
初心者の頃、僕も「クリックした時の反応＝JavaScript」だと思い込んでいた。でも、JSは読み込みが遅れたり、ブラウザの設定でオフにされていたりすると動かないことがある。
一方で、CSSの `:checked` はブラウザが標準で持っている機能だから、「壊れない」んだ。どれだけ回線が混雑していても、君が書いたCSSは確実にチェックボックスの状態を監視し続けてくれる。これって、フロントエンドの現場ではすごく信頼できる、頼もしい相棒なんだよ。
—
つまずきやすいポイント：焦らなくて大丈夫
初心者がよく悩むのが、「チェックボックスそのもののデザインを変えようとして、うまくいかない！」というケースだ。
実は、チェックボックスの四角い枠そのものは、OS（WindowsやMacなど）が描画しているから、CSSで直接色を変えるのが少し難しいんだ。でも、大丈夫。そんな時は、「チェックボックスを透明にして、その隣にある `label` タグをオシャレにデザインする」というテクニックを使うのが現場の常識だ。
「できない」んじゃなくて、「別の方法で攻略する」。これがCSSアーキテクトの思考法さ。
—
今日から使える「魔法」の練習
まずは、自分のエディタにこのコードをコピペして、ブラウザで触ってみてほしい。
/ チェックボックスを隠して、labelをボタンにする /
.my-switch {
display: inline-block;
padding: 10px 20px;
background: #eee;
cursor: pointer;
border-radius: 5px;
}
/ チェックされたらlabelの色を変える /
input[type=”checkbox”]:checked + .my-switch {
background: #4facfe;
color: white;
}
どうだい？ たったこれだけで、画面に「動き」が生まれたはずだ。
CSSは、ただ色を塗るだけの道具じゃない。ユーザーの行動に寄り添い、対話するための「言葉」なんだ。`:checked` を使いこなせば、君が作るWebサイトはもっと優しく、もっと生き生きとしたものになる。
もし途中でうまくいかなくても、焦らないで。何回でも書き直して、何回でもブラウザを更新していい。そうやって一つずつ、「動く感動」を積み重ねていくのが、一番の近道だからね。
またいつでも相談してくれ。君の素晴らしい挑戦を、心から応援しているよ。
コメント