Weblasts

チェックボックスとchecked擬似クラスを使ってCSSだけで画像切り替え

今回作るもののイメージ

checked疑似クラスをイジり倒す

サムネイルクリックで画像が切り替わるアレ

まずは、基本的なことから

checked擬似クラスとは?

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

ラジオボタンとは?

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

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

ラジオボタンSAMPLE

<p>
  <input type="radio" name="sample" value="sample1" checked>
  SAMPLE①
</p>
<p>
  <input type="radio" name="sample" value="sample2">
  SAMPLE②
</p>
<p>
  <input type="radio" name="sample" value="sample3">
  SAMPLE③
</p>

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

SAMPLE①

SAMPLE②

SAMPLE③

チェックボックスとは?

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

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

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

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

チェックボックスSAMPLE

<p>
  <input type="checkbox" name="sample" value="sample1" checked>
  SAMPLE①
</p>
<p>
  <input type="checkbox" name="sample" value="sample2">
  SAMPLE②
</p>
<p>
  <input type="checkbox" name="sample" value="sample3">
  SAMPLE③
</p>

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

SAMPLE①

SAMPLE②

SAMPLE③

checked擬似クラス

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

例えば…

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

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

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

SAMPLE

/*書いてみたCSSのコード*/ input:checked{ width:30px; height:30px; }

SAMPLE①

SAMPLE②

SAMPLE③

SAMPLE①

SAMPLE②

SAMPLE③

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

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

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

まずはひな形のHTMLから

HTML

<div class="foodcontainer">
<!--ラジオボタンは先頭に-->
 <input type="radio" name="food" id="food1" checked>
 <input type="radio" name="food" id="food2">
 <input type="radio" name="food" id="food3">
<!--大きく表示する画像重ね合わせやすいように-->
<div class="imgbox">
  <img src="img/food1.jpg" alt="seafood">
  <img src="img/food2.jpg" alt="seafood">
  <img src="img/food3.jpg" alt="seafood">
</div>
<!--サムネイル画像はリスト形式に-->
 <ul>
  <li><label for="food1"><img src="img/food1.jpg" alt="seafoodthumbnail"></label></li>
  <li><label for="food2"><img src="img/food2.jpg" alt="seafoodthumbnail"></label></li>
  <li><label for="food3"><img src="img/food3.jpg" alt="seafoodthumbnail"></label></li>
 </ul>
</div>

ポイント

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

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

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

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

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

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

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

基本のCSS

.foodcontainer .imgbox{
  max-width: 800px;
  min-height: 300px;
  position: relative;
}
.foodcontainer .imgbox img{
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    transition: .4s;
}
.foodcontainer ul{
    max-width: 800px;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.foodcontainer li{
    width: 30%;
}
.foodcontainer li label{
    display:block;
}
.foodcontainer li img{
    width: 100%;
    height:auto;
}
/*--実際の表示 重なっていることが分かりやすいようにopacityは0.2にしてあります--*/

仕上げ作業

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

動作させるCSS

/*ラジオボタンを非表示にする*/
#food1,#food2,#food3{
   display: none;
}
/*最初とクマノミのサムネイルをクリックしたときの指定*/
#food1:checked ~ .imgbox img:nth-child(1){
  opacity: 1;
}
/*ナンヨウハギ的な魚をクリックしたときの指定*/
#food2:checked ~ .imgbox img:nth-child(2){
  opacity: 1;
}
/*カメをクリックしたときの指定*/
#food3:checked ~ .imgbox img:nth-child(3){
  opacity: 1;
}

魚は友達、餌じゃない

Recommend Post