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

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

CSS2020.01.22

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

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

デモページ

CSSだけで画像切り替えするデモ

動画化もしてみました
内容が少し変わっているのは内緒だ

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

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

まずはひな形の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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

</div>

<ul>

</ul>

</div>

ポイント

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

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

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

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

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

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

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

.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%;
list-style-type:none;
}
.foodcontainer li label{
    display:block;
}
.foodcontainer li img{
    width: 100%;
    height:auto;
}
/*--実際の表示 重なっていることが分かりやすいようにopacityは0.2にしてあります--*/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

.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%;

list-style-type:none;

}

.foodcontainer li label{

display:block;

}

.foodcontainer li img{

width: 100%;

height:auto;

}

/*--実際の表示重なっていることが分かりやすいようにopacityは0.2にしてあります--*/

途中経過

仕上げ作業

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

/*ラジオボタンを非表示にする*/
#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;
}

1

2

3

4

5

6

7

8

9

10

11

12