Weblasts

ラジオボタンとchecked擬似クラスを使ってCSSだけで画像切り替え

checked擬似クラスを使うと色々な動きを出すことができます。
ここではクリックすると画像が切り替わるコンポーネントを作ったときの備忘録的なものを残しています

完成すると下のデモページのような感じになります

checked擬似クラスとは?

ボタン系のコントロールと組み合わせて使う疑似クラスで、ボタンにチェックが入っている状態を指す擬似クラス ボタン系のコントロールはinput要素のtype属性に「radio」と指定したときの「ラジオボタン」と type属性に「checkbox」と指定したときの「チェックボックス」がこれにあたります。

ラジオボタンとは?

複数項目の中から1つだけ選択できるボタンをラジオボタンと言います。
input要素のtype属性に「radio」と指定すると作れますが、重要なのはname属性で各ボタンのname属性値を合わせないと1つのグループにはなりません。
グループにして複数項目の中から選ばせたいのであればキッチリと合わせていきましょう。

checked属性を付けると選択済みにすることもできます。

こんなコードを書くと下のように表示される

radioボタン

チェックボックスとは?

複数項目の中から好きなものだけ選択できるボタンをチェックボックスと言います。

input要素のtype属性に「checkbox」と指定すると作れますが、やっぱり重要なのはname属性で各ボタンのname属性値を合わせないと1つのグループにはなりません。

グループにして複数項目の中から選ばせたいのであればキッチリと合わせていきましょう。

checked属性を付けると選択済みにすることもできます。

こんなコードを書くと下のように表示される
チェックボックス

checked擬似クラス

checked擬似クラスを使うと、ボタンにチェックが入っている状態を指すことができるのでユーザーがクリックしたかどうかが判定でき、様々なコンポーネントを作るための足掛かりになります。

例えば…

  • クリックしたら何かを表示する
  • クリックしたら内容を切り替える
  • クリックしたら要素を非表示にする

などなど、いろいろな状況に対応できそうです。

例えばで、クリックしたボタンの大きさを変えてみましょう

checked擬似クラスのテスト


チェックが入っている状態を指すことができているのが確認できると思います
この擬似クラスと、後に続く要素を指すことができるCSSセレクタの「~」を使って、クリックイベントのような仕組みを作っていきますよ

CSSのセレクタ「~」と組み合わせる

今回参考として、商品やサービスを紹介するページで使えそうな
「画像の下にサムネイルを表示しておいて、サムネイルをクリックすると画像がクリックしたものに切り替わる」的なコンポーネントを作っていきたいと思います。

まずはひな形のHTMLから

ポイント

注目すべき点は離れた場所からラジオボタンにチェックを入れるために

  • ラジオボタンにはID属性を設定
  • サムネイルにはlabel要素とfor属性を設定

上記2点の設定をすることで、離れた位置からでもラジオボタンにチェックを入れることができます。 ID属性はセレクタとしても使えますのでこの設定は必ずしておきます。

まずは見た目を整えます。

画像を切り替えられるよう「positionプロパティ」の「abusolute」で重ねて配置します。

opacityプロパティで透明にしておくことも忘れずに

サムネイルの配置はフレックスを使ってやりました。

途中経過

仕上げ作業

サムネイルクリックでラジオボタンのチェックが変わることが確認できます。
後は疑似クラスと「~」セレクタを組み合わせてopacityを操作するだけ
ラジオボタンを非表示にするのも忘れずに

完成例

魚は友達、餌じゃない