チェックボックスとは
一言で言うと…
「はい・いいえ」「する・しない」など、選ぶかどうかを決める時に使います。
よくある使い方の例として
①利用規約に同意します
サービスを使う前に、「ルールに同意しますか？」というときのhtmlコードがこちら↓
インプットのタイプをチェックボックスとします
チェックを入れたら「同意した」とみなされます
②メールを受け取るかどうか
会員登録などで、「お知らせメールを受け取りますか？」と言う場面ではこんな感じになります↓
③複数の選択肢を選ぶとき
ラジオボタンはひとつしか選べませんが、チェックボックスは複数選べます！
実はこれ、この小さなチェックボックスにチェックを入れなければなりません。チェックボックスは小さいので、スマホの画面からチェックするには、なかなかピンポイントでチェックできない！なんてなりかねません。
なので、チェックボックスと文字を繋げて文字をタップするとチェックできるようにします。
for 属性は繋げる役割
疑似クラス : checked を使って見た目を変える
疑似クラス :checked を使ってチェックを入れるとこのようになります↓
CSSはこのように書きます。
＊属性セレクタの解説はこちら→属性セレクタとは、classなしでもデザインできる便利ワザ！
＊疑似クラスの解説はこちら→擬似クラスってなに？リンクにマウスを乗せた時の”あの指マーク”で覚えよう！
＊隣接セレクタの解説はこちら→子孫クタ・子セレクタ・隣接セレクタの基本的な書き方
まとめ
・:checked は、チェックが入っているかどうかでCSSを変える便利な疑似クラス！
でもチェックを入れるには小さいボックスだけでは不便…
そこで登場するのが for 属性！
for =”〇〇”と書いたラベルは、 id=”〇〇”の input とペアになる！
つまり、ラベルを（文字）をクリックするだけでチェックできるようになる。
そして、チェックが入ったら :checked でCSSを反映！
コメント