こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で走り続けているチーフアーキテクトの私です。
CSSを勉強し始めると、「なんだか覚えることが多くて頭がパンクしそう…」ってなりますよね。特に`hover`だの`focus`だの、英語の小難しい「疑似クラス（ぎじクラス）」と呼ばれる仲間たちが次々と現れて、そっとブラウザのタブを閉じたくなる気持ち、痛いほどよくわかります。
でも、大丈夫ですよ。一つひとつ、身近なものに例えて紐解いていけば、CSSは魔法のように楽しくなります。
今回は、その中でも「おっ、これ知ってるとちょっとドヤ顔できるぞ」という隠れた名優、`:checked（チェックト）` 疑似クラスについて、とことん優しく、そして現場の生きた知見を交えてお話ししていきますね。
—
2. `:checked` ってそもそも何者？（身近なたとえ話）
突然ですが、みなさんはスーパーでお買い物するとき、カゴに商品をぽんっと入れますよね。あるいは、紙のアンケート用紙で「はい・いいえ」の丸いチェック欄をペンで塗りつぶしたことはありませんか？
あの、「チェックが入った瞬間」「選ばれた瞬間」という状態を、CSSの世界でピンポイントに指し示すことができるのが、この `:checked` くんの正体です。
HTMLのチェックボックス（`type=”checkbox”`）やラジオボタン（`type=”radio”`）は、普段はただの四角や丸です。しかし、ユーザーがポチッとクリックした瞬間、心の中に「選ばれたぞ！」というフラグが立ちます。
その瞬間をCSSにこう教えるんです。
> 「ねえCSSさん、今このチェックボックスが選ばれた（checked）状態になったから、こっそり見た目を変えておいてよ！」
この願いを叶えてくれるのが、`:checked` なんです。
—
3. なぜみんな `:checked` でつまずくの？（初心者の壁）
CSSを学び始めたばかりの方が、`:checked` を使おうとしてよくハマる罠があります。それは、
「チェックボックス本体って、見た目がダサすぎてデザインできない問題」
です。そう、ブラウザ（ChromeやSafariなど）が用意してくれるデフォルトのチェックボックスって、OSやブラウザごとに形がバラバラだし、なんだか野暮ったいですよね。「よし、こいつの色をピンクにして、サイズを大きくしてやるぞ！」と思って直接 `input[type=”checkbox”]` にCSSを書いても、なかなか思い通りになってくれません。
「あれ？ 私、何か間違ってる…？」
そう思って挫折してしまう人が後を絶ちません。
でも、安心してください。プロの現場では、「ダサい本体は画面の端っこにこっそり隠して、代わりに隣にいるおしゃれなパーツ（ラベル）を `:checked` の力で変身させる」という、ちょっとした裏技（王道テクニック）を使っているんです。
次のコードを見てみましょう。
—
4. 実践！心ときめくカスタム・チェックボックスを作ろう
百聞は一見にしかず。実際にコピペしてブラウザで動かせるコードを用意しました。
今回は、チェックを入れると、スイッチの背景がパッと明るいピンク色に変わる「おしゃれなトグルスイッチ」を作ってみましょう。
HTMLコード
CSSコード
/ コンテナ全体のレイアウト（中央に優しく配置） /
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f9fa;
font-family: sans-serif;
}
/ 1. ダサい本物のチェックボックスは、画面の外へこっそり隠す（でも機能は生きている！） /
.hidden-checkbox {
display: none;
}
/ 2. スイッチ全体のベースデザイン（カプセル型の枠組み） /
.switch-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer; / マウスを乗せたら指のマークにする親切設計 /
background-color: #e4e9ed;
padding: 8px 16px;
border-radius: 30px;
transition: background-color 0.3s ease; / 色が変わるときにフワッとアニメーションさせる /
}
/ 3. スイッチの中の丸いポッチ /
.switch-circle {
width: 24px;
height: 24px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease; / 動くときに滑らかにする /
}
.switch-text {
font-size: 14px;
color: #333333;
user-select: none; / 文字が意図せず選択されないようにする気配り /
}
/ ==========================================
ここが主役！ :checked の魔法の出番です！
========================================== /
/ チェックボックスが「選ばれた（:checked）」とき、
直後にあるラベル（.switch-label）の背景色をピンクに変える！ /
.hidden-checkbox:checked + .switch-label {
background-color: #ff6b81;
}
/ さらに、チェックが入ったとき、中の丸いポッチを右側にスライドさせる！ /
.hidden-checkbox:checked + .switch-label .switch-circle {
transform: translateX(20px); / ぐっと右に移動 /
}
コードのここがポイント！
CSSの中に出てくる `+` （プラス記号）は、「隣の兄弟」を指すセレクタです。
「`#my-switch`（チェックボックス）が `:checked` になったとき、その直後にいる `.switch-label` をこう変えてね」という指令を出しています。
これを使うと、JavaScriptを1行も書かずに、滑らかでリッチなUI（ユーザーインターフェース）がCSSだけで作れてしまうんです。すごくないですか？
—
5. チーフアーキテクトからのエール
いかがでしたでしょうか？ `:checked` 疑似クラスは、ただの状態を選ぶだけでなく、HTMLの構造と組み合わせることで、無機質なフォームを「触っていて気持ちいいUI」に変えてくれる強力な相棒です。
最初は「なんかルールが多くて難しそう…」と思うかもしれませんが、コードを書いて、ブラウザで色が変わった瞬間を見たときの「おっ、動いた！」という感動は、何物にも代えがたいエンジニアの醍醐味です。
もし途中でうまくいかなくても、焦る必要はまったくありません。「あ、ここスペルミスしてたな」「セレクタのつながりが違うな」と一つひとつ紐解いていけば、必ず思い通りのデザインができるようになります。
あなたのWeb制作・開発の旅が、明日も楽しくワクワクするものでありますように。
それではまた、次の現場でお会いしましょう！
コメント