CSSスキル - 第8章 Lesson9

チェックボックスにチェックを入れた時にスタイルを適応させよう

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

チェックボックスにチェックが入った時にスタイルを適応させる方法について、解説します。
ここでは、チェックが入った項目のラベルを太く目立たせます。



この動画で学べること

・チェックボックスにチェックが入った時にスタイルを適応させる方法



チェックボックスにチェックが入った時にスタイルを適応させる方法

今回は、お問い合せのフォームのチェックボックスにチェックが入った時に文字が太くなるようにしていきたいと思います。
まずは単純に、文字を太くするという命令を<label>タグに書いていきます。




label {
font-weight: bold;
}




保存してブラウザで見てみると、すべての文字が太くなりました。
この文字を太くするという命令を、チェックボックスにチェックが入ったときに適応させるという指定をしていきたいと思います。



input:checked  label {
font-weight: bold;
}




保存してブラウザで見てみましょう。
これでは上手くいきません。
なぜかというと、「input:checked label」というセレクタの書き方では要素が親子関係ですが、HTMLを見ると、<label>タグの下に<input>タグがあって親子要素ではないからです。
こういう時には<input>の直下にある<label>要素に対してスタイルをかけるという隣接セレクタを使います。
隣接セレクタの書き方は「要素+要素」なので、このように書いてください。



input:checked + label {
font-weight: bold;
}




では保存してブラウザで見てみましょう。
チェックはボックスにチェックを入れたときだけ、文字が太くなるようにすることができました。