CSSの擬似クラス:checkedの使い方と効かない時の解決方法
みなさんこんにちは！ワトスンです。
今回は、、
といった悩みに答えます。
■読んでほしい人
CSSの基本を理解できている方
ぜひ皆さんには、擬似クラス「:checked」の使い方をマスターしてもらい、コーディングの可能性を広げてもらえたらなと思います。
CSSの擬似クラス:checkedの使い方
「:checked」を使用シチュエーションは以下のような時です。
・「メニューボタン」を押してメニュー一覧を表示させる
・「チェックボタン」を押しボタンのデザインを変更させる
なんらかの要素を押して、動きをつけたりデザインを変更させたりする際に使用します。
とても便利な擬似クラスなのでぜひ使いこなせるようにしましょう。
それでは具体的な使い方をご紹介していきます。
:checkedの使い方
擬似クラス:checkedの使い方をご紹介していきます。
:checkedを使用するためには必要なものがあります。
（要素同士を連動させる場合）
まずは以下の３つをご用意して下さい。
・チェックボックスまたはラジオボックス
→typeとidを指定する（例：＜input type=”checkbox” id=”check_input”＞）
・チェックをつけるための要素
→forとidを指定する（例：＜label id=”check_btn” for=”check_input”＞押してね＜/label＞）
・動きをつけたい要素
→idを指定する（例：＜div id=”check_content”＞動きをつけたい要素＜/div＞）
以上の３つを用意して「:checked」を使用していきます。
動作の流れとしては、
「チェックをつけるための要素」を押す
↓
「チェックボックスまたはラジオボックス」にチェックされる
↓
チェックされると「動きをつけたい要素」の動作またはデザインが変わる
といった感じです。
上の３つに付けたtype、for、idなどは必要なので必ず指定して下さい。
「チェックボックスまたはラジオボックス」のidと「チェックをつけるための要素」のforの名前を同じにして関係をヒモ付けすることで動作を可能にします。
forで指定した名前と同じid名を持つチェックボックスまたはラジオボックスにチェックが付けられます。
:checkedの具体的な使用例
:checkedの具体的な使用例をご紹介します。
以下のようなコード↓の場合、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div> <input type="checkbox" id="check_input"> <label id="check_btn" for="check_input">押してね</label> <div id="check_content">動きをつけたい要素</div> </div> <style> /*--------デザイン--------*/ #check_btn{ background-color:#FFBB4E; padding:10px; box-shadow: 2px 0 4px rgba(0, 0, 0, .2); } #check_content{ background-color:blue;/*チェック前の色は青*/ padding:10px; color:#fff; } /*--------動きをつける--------*/ input[type=checkbox]:checked ~ #check_content{ background-color:red;/*チェック後の色は赤*/ } </style> |
↓下のような感じになります。
「押してね」ボタンを押すと、チェックがつき、「動きをつけたい要素」のデザインを変化させることができます。
id「check_input」の要素にチェックがついたらid「check_content」の要素のデザインを変化させるには、
|
1 2 |
input[type=checkbox]:checked ~ #check_content{ } |
のように「:checked ~ 」でチェック後の変化を指定してあげます。
:checkedが効かない時の解決方法
時々、擬似クラスの「:checked」が上手く効かない場合があります。
この原因はとても簡単なことで、“要素同士が兄弟関係になってない”せいです。
擬似クラス「:checked」で連動して要素を変化させるにはその要素同士を兄弟関係にして下さい。
以上で擬似クラス「:checked」の解説は終わりです。
ちなみに、チェックボックスはサイトデザインに必要のないものだと思うので、基本的にはチェックボックスは非表示にして見えないようにしておきます。
なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！
以上です。
