HTMLとCSSでつくるスライドショー（全体の要素を動かす）

2022年2月6日 19:22

ラジオボックスを利用してスライドショーを作成します。
今回は4枚の画像を使用します。
4枚の画像は自分で用意してください。
私は、サイズ、横幅260、高さ280の画像を用意して試しています。
4枚の画像をフレックスボックスを使って横並びにし、それを1つの要素として扱い、位置を動かすことで、スライドショーにします。
まずは、ラジオボックスを4つ用意します。
htmlに以下のように記述します。

<input type="radio" name="slideshow" id="slide1" checked>
<input type="radio" name="slideshow" id="slide2">
<input type="radio" name="slideshow" id="slide3">
<input type="radio" name="slideshow" id="slide4">

1番最初のラジオボックスにはcheckedをつけておきます。
1番最初の画像を初期状態で表示しておくためです。

次に、スライドショーで使う画像を読み込みます。
htmlに以下のように記述します。

<div class="slideshow">

</div>

divタグで画像を実際に表示するslideshowクラスと4つの画像を1つに連結するslidesクラスとを用意しています。imgのsrcの値は自分で用意した画像のファイル名を入力してください。ここでは、仮に4つの画像をsample01.png、sample02.png、sample03.png、sample04.pngとしています。

htmlでラジオボックスの準備と画像の準備ができた、次はcssに移ります。

スライドショーの設定に入る前に、まずは、cssの全体の基本的な設定を行います。

@charset "UTF-8";

*{
margin : 0;
padding : 0;
}

*,
*::before,
*::after{
box-sizing : border-box;
}

html{
font-size : 100%;
}

body{
font-family : sans-serif;
color : #432;
}

img{
display : block;
max-width : 100%;
height : auto;
}

これらはスライドショーをつくる前段階として必要なcssになります。
詳しい解説はしませんが、box-sizing : border-box;とimgタグへの設定は重要な設定になりますので、必ず書いてください。

では、さっそくスライドショーをつくるcssに取り掛かりましょう。
まずは、画像を実際に表示するslideshowクラスの設定を行います。

.slideshow{
max-width : 400px;
width : 100%;
height : 400px;
overflow : hidden;
border : 4px solid #f67690;
border-radius : 10px;
margin : 0 auto;
margin-top : 40px;
position :relative;
}

widthを100%にすることで、画面のいっぱいに横幅が広がります。
これにより、画面幅に応じて画像が伸縮します。これにmax-width : 400px;
を加えることで、最大でも横幅400pxまでしか要素が広がらなくなります。高さの方は、height : 400px;を指定することで、固定しています。そして、overflow : hidden;で設定した画面幅と高さからはみでる要素を非表示にしています。これは、次に設定するslidesクラスでフレックスボックスを使って、画像4枚を横並びにつなげた要素をつくるので、そのうちの1枚分の画像を表示するためです。この記述を入れないと、4枚の画像が見えてしまいます。開発段階で動きを確認したい場合は、overflow : hidden;を最後に記述しましょう。border : 4px solid #f67690;とborder-radius : 10px;は単なる装飾です。枠を作り、枠の角を丸めています。margin : 0 auto;とmargin-top : 40px;によって、画像の表示する位置を調整しています。左右のmarginをautoにすると左右中央寄せができるのでmargin : 0 auto;としています。これに、margin-top : 40px;を追記して、上に余白をつくっています。これは、margin : 40px auto 0;と記述しても同じです。最後のposition :relative;はslidesクラスのためのものです。slidesクラスの親要素であるslideshowクラスにposition :relative;を指定することで、slideshowクラスを基点とした上下左右の位置の調整ができます。

続いて、slidesクラスの設定を行います。
.slides{
width : 400%;
height : 100%;
display : flex;
position : absolute;
top : 0;
transition : 1s;
}

width : 400%;は画像を4枚使用して、横並びにするためです。height : 100%;は、slideshowクラスのheight に合わせて、height : 400px;と書いても同じですが、slideshowクラスのheight の値を変更する場合に、このように書いておくと楽です。display : flex;で中の要素を横並びにします。position : absolute;で親要素であるslideshowクラスを基点として位置設定ができるようになります。親要素にposition :relative;が記述されている必要があります。top : 0;でslideshowクラスの上0pxの位置に画像を配置しています。leftの値はどのラジオボックスをチェックしたかによって変わるのでここでは記述していません。transition : 1s;で変化にかける時間を設定しています。後ほど、チェックされたラジオボックスによって全体の位置を動かすので、その変化にかかる時間になります。この値を変更することで変化にかかる時間を変えられます。

続いて画像の設定です。4枚の画像に共通したslideクラスをつけているので、そちらを設定します。

.slide{
width : 100%;
height : 100%;
object-fit : cover;
}

object-fit : cover;とすることで、元の画像の比率を維持したまま、表示領域をうめつくします。
object-fit : contain;としても、元の画像の比率を維持しますが、余ったスペースに余白が生じます。

では、いよいよスライドショーを動かします。
ラジオボックスの値によってslidesクラスの位置を変えます。

#slide1:checked ~ .slideshow .slides{
left : 0;
}

#slide2:checked ~ .slideshow .slides{
left : -100%;
}

#slide3:checked ~ .slideshow .slides{
left : -200%;
}

#slide4:checked ~ .slideshow .slides{
left : -300%;
}

#slide1はラジオボックスのID名になります。
#slide1:checkedで#slide1がチェックされたらという意味です。
#slide1:checked ~で、#slide1と同じ階層にある兄弟要素を動かすと指示しています。#slide1:checked ~ .slideshowで、#slide1と同じ階層にある兄弟要素であるslideshowクラスを動かすと指示しています。そして、#slide1:checked　~ .slideshow .slidesで、#slide1と同じ階層にある兄弟要素であるslideshowクラスのの子要素であるslidesクラスを動かすと指示しています。

#slide1:checked ~ .slideshow .slides{
left : 0;
}
1番目のラジオボタンがチェックされたらleft : 0;にします。

#slide2:checked ~ .slideshow .slides{
left : -100%;
}
2番目のラジオボタンがチェックされたらleft : -100%;にします。
1枚分左に動かしています。

#slide3:checked ~ .slideshow .slides{
left : -200%;
}
3番目のラジオボタンがチェックされたらleft : -200%;にします。
2枚分左に動かしています。

#slide4:checked ~ .slideshow .slides{
left : -300%;
}
4番目のラジオボタンがチェックされたらleft : -300%;にします。
3枚分左に動かしています。

これでラジオボタンによる要素の移動ができました。
あとは、ラジオボックスをそのまま利用するのではなく、専用のボタンを用意します。
htmlに戻って、専用のボタンを作る記述を追記します。

ラベルを使って各ラジオボックスと対応づけています。
for="slide1"で<input type="radio" name="slideshow" id="slide1" checked>
のid="slide1"と対応づけています。for="slide2”、 for="slide3”、 for="slide4”も同様に対応づけています。

では、cssの設定に移ります。
.slides-nav{
display : block;
background-color : #fff;
width : 20px;
height : 20px;
border : 4px solid #f67690;
border-radius : 50%;
margin : 20px 10px;
}

display : block;で、ラベル要素をブロック要素に変えて、幅と高さを設定できるようにします。
background-color : #fff;、width : 20px;、height : 20px;、border : 4px solid #f67690;、border-radius : 50%;でボタンのデザインをしています。
margin : 20px 10px;でボタンの配置をしています。

ボタン全体のレイアウトを整えます。
.slideshow-nav{
display : flex;
justify-content : center;
}
display : flex;でボタンを横並びにします。
justify-content : center;で画面の左右中央に配置します。

ボタンにマウスホバーした時の動きをつけます。
.slides-nav:hover{
background-color : #f67690;
}

:hoverでホバーした時の動きをつけることができます。
background-color : #f67690;で背景色を#f67690に塗りつぶします。

最後に、ラジオボックスを見えなくして、さわれなくします。

input[name="slideshow"]{
position : absolute;
opacity : 0;
z-index : -1;
}

opacity : 0;で見えなくしています。
z-index : -1;でさわれなくしています。

以上で、スライドショー（全体の要素を動かす）の完成です。
スライドショー（全体の要素を動かす）をhtml全文とcss全文を以下に載せます。

html 全文

<!DOCTYPE html>
<html lang="ja">

<head>

</head>

<body>

</div>

</body>

</html>

css全文

@charset "UTF-8";

*{
margin : 0;
padding : 0;
}

*,
*::before,
*::after{
box-sizing : border-box;
}

html{
font-size : 100%;
}

body{
font-family : sans-serif;
color : #432;
}

img{
display : block;
max-width : 100%;
height : auto;
}

input[name="slideshow"]{
position : absolute;
opacity : 0;
z-index : -1;
}

#slide1:checked ~ .slideshow .slides{
left : 0;
}

#slide2:checked ~ .slideshow .slides{
left : -100%;
}

#slide3:checked ~ .slideshow .slides{
left : -200%;
}

#slide4:checked ~ .slideshow .slides{
left : -300%;
}

.slideshow{
max-width : 400px;
width : 100%;
height : 400px;
overflow : hidden;
border : 4px solid #f67690;
border-radius : 10px;
margin : 0px auto;
margin-top : 40px;
position :relative;
}

.slides{
width : 400%;
height : 100%;
display : flex;
position : absolute;
top : 0;
transition : 1s;
}

.slide{
width : 100%;
height : 100%;
object-fit : cover;
}

.slideshow-nav{
display : flex;
justify-content : center;
}

.slides-nav{
display : block;
background-color : #fff;
width : 20px;
height : 20px;
border : 4px solid #f67690;
border-radius : 50%;
margin : 20px 10px;
}

.slides-nav:hover{
background-color : #f67690;
}

この記事が気に入ったらサポートをしてみませんか？