CSSの擬似クラス:checkedの使い方と効かない時の解決方法 | 您所在的位置:网站首页 › css的checked属性 › CSSの擬似クラス:checkedの使い方と効かない時の解決方法 |
2021年2月27日
プログラミング
CSSの擬似クラス:checkedの使い方と効かない時の解決方法
みなさんこんにちは!ワトスンです。 今回は、、 CSSの擬似クラス:checkedの使い方が知りたい。効かないけどどう対処したらいいの?といった悩みに答えます。 ■読んでほしい人 CSSの基本を理解できている方 ぜひ皆さんには、擬似クラス「:checked」の使い方をマスターしてもらい、コーディングの可能性を広げてもらえたらなと思います。 目次 1 CSSの擬似クラス:checkedの使い方1.1 :checkedの使い方1.2 :checkedの具体的な使用例2 :checkedが効かない時の解決方法 CSSの擬似クラス:checkedの使い方「:checked」を使用シチュエーションは以下のような時です。 ・「メニューボタン」を押してメニュー一覧を表示させる ・「チェックボタン」を押しボタンのデザインを変更させる なんらかの要素を押して、動きをつけたりデザインを変更させたりする際に使用します。 とても便利な擬似クラスなのでぜひ使いこなせるようにしましょう。 それでは具体的な使い方をご紹介していきます。 :checkedの使い方擬似クラス:checkedの使い方をご紹介していきます。 :checkedを使用するためには必要なものがあります。 (要素同士を連動させる場合) まずは以下の3つをご用意して下さい。 ・チェックボックスまたはラジオボックス →typeとidを指定する(例:<input type=”checkbox” id=”check_input”>) ・チェックをつけるための要素 →forとidを指定する(例:<label id=”check_btn” for=”check_input”>押してね</label>) ・動きをつけたい要素 →idを指定する(例:<div id=”check_content”>動きをつけたい要素</div>) 以上の3つを用意して「:checked」を使用していきます。 動作の流れとしては、 「チェックをつけるための要素」を押す ↓ 「チェックボックスまたはラジオボックス」にチェックされる ↓ チェックされると「動きをつけたい要素」の動作またはデザインが変わる といった感じです。 上の3つに付けたtype、for、idなどは必要なので必ず指定して下さい。 「チェックボックスまたはラジオボックス」のidと「チェックをつけるための要素」のforの名前を同じにして関係をヒモ付けすることで動作を可能にします。 forで指定した名前と同じid名を持つチェックボックスまたはラジオボックスにチェックが付けられます。 :checkedの具体的な使用例:checkedの具体的な使用例をご紹介します。 以下のようなコード↓の場合、 XHTML 1234567891011121314151617181920212223 押してね動きをつけたい要素 /*--------デザイン--------*/#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;/*チェック後の色は赤*/}
↓下のような感じになります。 動きをつけたい要素
「押してね」ボタンを押すと、チェックがつき、「動きをつけたい要素」のデザインを変化させることができます。 id「check_input」の要素にチェックがついたらid「check_content」の要素のデザインを変化させるには、 12 input[type=checkbox]:checked ~ #check_content{}
のように「:checked ~ 」でチェック後の変化を指定してあげます。 :checkedが効かない時の解決方法時々、擬似クラスの「:checked」が上手く効かない場合があります。 この原因はとても簡単なことで、“要素同士が兄弟関係になってない”せいです。 擬似クラス「:checked」で連動して要素を変化させるにはその要素同士を兄弟関係にして下さい。
以上で擬似クラス「:checked」の解説は終わりです。 ちなみに、チェックボックスはサイトデザインに必要のないものだと思うので、基本的にはチェックボックスは非表示にして見えないようにしておきます。 なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください! 以上です。 タグ: checkedCSS擬似クラス コメントを残す コメントをキャンセル関連記事 2020年6月21日 formのactionに自分自身を指定する方法[エラー対処も] 2021年1月23日 [PHP]カレンダーに祝日を表示する方法[わかりやすく解説] 2020年6月19日 「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に! 2020年5月23日 [MySQL]Error#1064 のエラーが出た時の解決方法[phpMyAdmin] 2020年6月26日 [もう困らない]CSSで要素や画像を両端に揃える方法[3つの方法] 2020年11月29日 [カスタムロゴ]WordPressでカスタマイズしてロゴを設置する方法 |
CopyRight 2018-2019 实验室设备网 版权所有 |