【CSS】擬似クラスの「:checked」の使い方！【分かりやすい】

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事ではCSSの擬似クラスの「:checked」の使い方について解説します。

擬似クラスの「:checked」って何？？

このような方が対象です。

また、下の動画でも擬似クラスの「:checked」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります！

「:checked」を使うと何ができる？

「:checked」を使うと、「選択されているボタンや選択肢」にスタイルを当てることができます。

なるほどね！

選択できる要素は？

選択できる要素として挙げられるのは下記のようなものです。

ユーザーの選択によってスタイルが分けられるので、便利ですね。選択しているボタンを分かりやすくスタイリングしてあげるといいでしょう！

実際に「:checked」を使ってみる！

使用例を実際に見た方が「:checked」のイメージが湧きやすいと思うので、簡単な使用例も書いておきますね！

わーい！

「:checked」を「ラジオボタン」に使う

<form action="">
    
    <input type="radio" name="color" id="green">
    <label for="green">green</label><br>

    <input type="radio" name="color" id="blue">
    <label for="blue">blue</label><br>

    <input type="radio" name="color" id="pink">
    <label for="pink">pink</label>

</form>

input:checked {
    outline: 4px solid pink;
}

「input要素」に「type=”radio”」とすると「ラジオボタン」が作れます。

「ラジオボタン」というのは、グループの中から１つだけ選択できるタイプのボタンを指します。

「:checked」を使うと、選択してあるボタンにスタイルを当てることができるので、ユーザーが選んだボタンを強調したりすることができますね。

「:checked」を「チェックボックス」に使う

<form action="">
    
    <input type="checkbox" name="color" id="green">
    <label for="green">green</label><br>

    <input type="checkbox" name="color" id="blue">
    <label for="blue">blue</label><br>

    <input type="checkbox" name="color" id="pink">
    <label for="pink">pink</label>

</form>

input:checked {
    outline: 4px solid pink;
}

「input要素」に「type=”checkbox”」とすると「チェックボックス」が作れます。

「チェックボックス」というのは、それぞれの項目ごとに「チェックする」「チェックしない」を選ぶことができるタイプのボタンを指します。

「ラジオボタン」との違いは「グループの中で複数選択できる点」です。

「ラジオボタン」はグループの中で１つしか選択できませんが、「チェックボックス」は項目ごとに「選択する」「選択しない」を選ぶことができます。

なので「チェックボックス」は「全部の項目をチェックする」こともできます。

そして「:checked」を使うと、選択してあるボタンにスタイルを当てることができるので、ユーザーが選んだボタンを強調したりすることができますね。

「:checked」を「オプションボタン」に使う

<form action="">

    <select name="" id="" size="3">
        <option value="blue">blue</option>
        <option value="green">green</option>
        <option value="pink">pink</option>
    </select>

</form>

「select 要素」と「option要素」を使うことで「選択式のメニュー」が作れます。

Webサイトに訪問したユーザーは、選択肢の中から１つ、もしくは複数を選択することができます。

そして「:checked」を使うと、選択している選択肢にスタイルを当てることができるので、ユーザーが選んだ選択肢を強調したりすることができます。

参考リンク。

仕様書。
https://drafts.csswg.org/selectors/#checked

MDN。
https://developer.mozilla.org/ja/docs/Web/CSS/:checked

あわせて読みたい記事。

まとめ

「:checked」を使うと、「選択されているボタンや選択肢」にスタイルを当てることができる。

選択できる要素として挙げられるのは下記のようなもの。

「:checked」はユーザーが選択しているボタンや選択肢を強調する際に使われたりします。

この記事が気に入った方は僕のTwitter（@chibasyuta）のフォローもお願いします！

また、下の動画でも擬似クラスの「:checked」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それではこんな感じでこの記事を終わります！

ではまた！