CSSのcheckedを完全ガイド！チェックボックスの状態を判定する方法

:checkedでチェックボックスやラジオボタンの状態を判定する方法

先生と生徒の会話形式で理解しよう

生徒

「アンケートや設定画面にあるチェックボックスで、チェックを入れたときだけ文字の色や背景を変えることはできますか？」

先生

「はい、CSSのcheckedという疑似クラスを使えば、プログラムを書かなくても見た目を切り替えることができますよ。」

生徒

「チェックが入っているかどうかをCSSが自動で判断してくれるんですか？」

先生

「その通りです！ラジオボタンでも同じように使えます。具体的な仕組みを一緒に見ていきましょう！」

1. checked疑似クラスとは何かを正しく理解しよう

ウェブサイトを閲覧していると、クリックしてレ点を入れるチェックボックスや、複数の選択肢から一つを選ぶラジオボタンをよく見かけます。これらの要素が「今、選ばれている状態か、そうでないか」を判別するための仕組みが:checked（チェックド）です。

これはCSSの疑似クラス（ぎじくらす）と呼ばれる仲間で、特定の状態にある要素だけを狙ってデザインを変更するために使われます。パソコンを初めて触る方にとっては、「電気のスイッチ」をイメージすると分かりやすいでしょう。スイッチが「入」のときだけ電球が光るように、チェックが「入」のときだけ特別なデザインを適用させることができるのです。この技術をマスターすると、ユーザーにとって操作感が心地よい、直感的なサイト作りが可能になります。

2. チェックボックスの背景色を切り替える基本の書き方

まずは、最も基本的なチェックボックスでの使い方を学習しましょう。HTMLでは、チェックボックスを作るためにinput（インプット）タグを使い、種類としてcheckboxを指定します。これに対してCSSで「:checked」を付け加えることで、チェックが入った瞬間のスタイルを指定できます。

ただし、チェックボックス自体の色を変えるのは少し工夫が必要な場合があるため、まずは「チェックされた要素そのもの」に変化をつけて、どのように動作するかを確認してみるのが上達の近道です。以下のサンプルでは、チェックを入れるとチェックボックスが少し大きく見えるように設定しています。


<style>
    /* チェックボックスが選ばれた時の設定 */
    .basic-check:checked {
        outline: 3px solid #ffc107;
        transform: scale(1.5);
    }
</style>

<div class="p-3">
    <input type="checkbox" class="basic-check">
    <span>ここをクリックしてチェックしてね</span>
</div>

ブラウザ表示

ここをクリックしてチェックしてね

3. ラジオボタンで選んだ項目を強調するデザイン

ラジオボタンは、いくつかの選択肢の中から必ず一つだけを選ぶ形式のボタンです。例えば「性別を選択してください」や「お支払い方法を選んでください」といった場面で使われます。チェックボックスと異なり、一つを選ぶと他の項目のチェックが外れるのが特徴です。

このラジオボタンにも「:checked」は有効です。選択された項目だけがパッと目立つようになれば、利用者は自分が何を選んだのか一目で確認できるため、親切なサイトだという印象を持ってもらえます。SEO（検索エンジン最適化）の観点でも、ユーザーが迷わずに操作できるユーザビリティの高いサイトは、Googleから高く評価される傾向にあります。


<style>
    /* 選択されたラジオボタンに影をつける */
    .radio-sample:checked {
        box-shadow: 0 0 10px #28a745;
    }
</style>

<div class="p-3">
    <p>好きな果物を選んでください：</p>
    <input type="radio" name="fruit" class="radio-sample"> りんご
    <input type="radio" name="fruit" class="radio-sample"> みかん
</div>

ブラウザ表示

好きな果物を選んでください：

りんごみかん

4. 隣接セレクタを組み合わせて文字色を変える高等テクニック

ここからがCSSの面白いところです。単にボタンの形を変えるだけでなく、「チェックが入ったら、その隣にある文字の色を変える」という動きを作ってみましょう。これには隣接セレクタ（りんせつせれくた）という記号「+」を使います。

「input:checked + span」と書くと、「チェックが入った入力欄の、すぐ隣に書いてあるspanタグ（文字）」という意味になります。これを使えば、チェックを入れると文字がグレーから鮮やかな赤に変わったり、打ち消し線が入ったりするような、まるでTODOリスト（やることリスト）のような仕掛けが簡単に作れます。プログラミング言語を使わずにここまでできるのは、CSSの非常に強力なポイントです。


<style>
    .todo-check:checked + .todo-text {
        color: #adb5bd;
        text-decoration: line-through;
    }
    .todo-text {
        font-weight: bold;
    }
</style>

<div class="p-2">
    <input type="checkbox" class="todo-check">
    <span class="todo-text">毎朝の散歩をする</span>
</div>

ブラウザ表示

毎朝の散歩をする

5. ラベルタグを活用してクリックしやすくする工夫

チェックボックスやラジオボタンは、実はとても小さくてクリックしづらいと思ったことはありませんか？特にお年寄りやパソコン操作に慣れていない方にとって、あの小さな四角形にマウスを合わせるのは一苦労です。そこで使われるのがlabel（らべる）タグです。

labelタグで文字を囲むと、その文字をクリックしただけでチェックボックスにチェックが入るようになります。さらに「:checked」と組み合わせることで、「選ばれたラベルだけ背景を黄色くしてボタンのように見せる」といったリッチなUI（ユーザーインターフェース：使い勝手）を構築できます。これはサイトの満足度を高めるために必須のテクニックと言えます。

6. アコーディオンメニューやタブ切り替えへの応用

驚くべきことに、この「:checked」の仕組みを応用すると、クリックすると中身が開くアコーディオンメニューや、表示を切り替えるタブメニューもCSSだけで作ることができます。チェックが入っている間だけ、隠していたコンテンツを表示させるように設定するのです。

以前はこれらを作るために難しいプログラム（JavaScriptなど）を何行も書く必要がありましたが、今はCSSの「:checked」と「~」（後続兄弟セレクタ）という記号を組み合わせるだけで実現可能です。ページが軽くなり、スマホでの表示もスムーズになるため、現代のウェブ制作では非常に好まれる手法となっています。

7. checkedが反応しないときに確認すべき注意点

設定したはずなのに、チェックを入れても見た目が変わらない…そんな時は、まずHTMLの順番を確認しましょう。CSSの「+」や「~」という記号は、基本的に「後のもの」に対してしか命令を送ることができません。つまり、チェックボックスよりも前に書かれている文字の色を変えることはできないのです。

必ず「inputタグ（チェックボックス）」を先に書き、その後に「装飾したいタグ（文字など）」を書くように配置してください。この順番さえ守れば、思い通りのデザインが反映されるはずです。また、スペルミスで「checkd」などとなっていないかも、初心者の方がよく陥るポイントですので注意して見てみましょう。

8. 実践！オシャレなスイッチ風ボタンを作ってみよう

最後に、よくスマホの設定画面にあるような「スライド式のスイッチ」をイメージしたデザインに挑戦してみましょう。これは、実際のチェックボックス自体は透明にして隠してしまい、その隣に用意した四角い枠（ラベル）をデザインすることで作ります。

チェックが入ると、枠の中にある丸いボタンが左から右へ移動するようにアニメーションを設定します。一見すると非常に複雑なプログラムが動いているように見えますが、実はこれも「:checked」の状態を見て、丸い要素の場所（position）を移動させているだけなのです。こうした仕掛けはサイトに楽しさを与え、ユーザーが何度もクリックしたくなるような魅力を生み出します。


<style>
    /* 元のチェックボックスは隠す */
    .switch-input {
        display: none;
    }
    /* スイッチの土台 */
    .switch-label {
        display: inline-block;
        width: 60px;
        height: 30px;
        background-color: #ccc;
        border-radius: 15px;
        position: relative;
        cursor: pointer;
        transition: 0.4s;
    }
    /* スイッチの中の丸 */
    .switch-label::after {
        content: "";
        position: absolute;
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: 0.4s;
    }
    /* チェックが入った時の土台の色 */
    .switch-input:checked + .switch-label {
        background-color: #007bff;
    }
    /* チェックが入った時の丸の移動 */
    .switch-input:checked + .switch-label::after {
        left: 32px;
    }
</style>

<div class="p-3">
    <input type="checkbox" id="mySwitch" class="switch-input">
    <label for="mySwitch" class="switch-label"></label>
    <span>スイッチを切り替えてみて！</span>
</div>

ブラウザ表示

スイッチを切り替えてみて！

9. 見た目だけでなく、アクセシビリティも大切に

デザインを凝りすぎて、本来のチェックボックスを完全に隠してしまう場合は注意が必要です。音声読み上げソフトを使っている方や、キーボードだけで操作している方にとっては、チェックボックスが見えなくなると「どこを操作すればいいのか」分からなくなってしまうからです。

「:checked」を使ってオシャレにする際は、キーボードの「Tab」キーで選択したときに枠線が出るようにするなど、アクセシビリティ（誰もが使いやすいこと）への配慮も忘れないようにしましょう。見た目の美しさと使いやすさの両立こそが、プロのウェブ制作者への第一歩です。今回の内容をきっかけに、色々なフォームのデザインに挑戦してみてくださいね！

2026年最新スキルアップ・実践セミナー