ある日ふと「バナー画像をスライドショーで表示したい」と思いつきまして、作成に挑戦してみることにしました。
かなり手こずったものの、思い描いていたようなスライドショーをなんとか形にすることができたので、備忘録として以下にコードなどを載せておこうと思います。
目次
CSSで作るスライドショーの見本
- 幅300px、高さ250px（CSSで変更可）
- フェイドイン・フェイドアウトで画像が切り替わります
- 自動で繰り返します
- それぞれの画像にリンクを貼ることができます
CSSで作るスライドショーのコード
CSSで作るスライドショーのhtml
以下のコードを、スライドショーを表示させたい部分に記述します。
「a href=””」にリンク先を、「img src=””」に画像のurlやパスを書いてください。
CSSで作るスライドショーのCSS
以下のコードをスタイルシートに追加します。
幅と高さ
3行目「width」で幅を、4行目「height」で高さを指定しています。お好みで数字を変更することができます。
「nth-of-type」とは
ある要素の中の何番目の要素に対するスタイルか、ということを表しています。
「.fadeslide div:nth-of-type(1)」だと、「.fadeslide」というクラスの中の、1番目のdivにどのようなスタイルを適用するか、ということを示しています。
秒数の設定
「.fadeslide div:nth-of-type(1)」などの、
30s 0s
という部分で、スライドショーの秒数を設定しています。
上記の場合は、全部で30秒、「.fadeslide div:nth-of-type(1)」は0秒から表示、「.fadeslide div:nth-of-type(2)」は5秒から表示……ということを表しています。
なので7枚目のバナー画像を足す場合は、上の30sを全て35sにし、
.fadeslide div:nth-of-type(7) {
animation: fadeslide 35s 30s infinite both;
z-index:0;
}
というコードを足します。またHTMLにも、
<div><a href=""><img src=""></a></div>を追加してください。
画像を減らす場合は、30sを25s、20s……と減らしていきます。HTMLからも、
<div><a href=""><img src=""></a></div>減らす分だけこのコードを削除してください。
その他
- 「fadeslide」は任意でつけたスライドショーの名前です。
- 「infinite」は無限に繰り返すことを表しています。
- 「both」は、アニメーション再生前後にもCSSのkeyframesを適用することを表しています。これはなくても大丈夫なのですが、入れた方が初動のもたつきが軽減されたので入れることにしました。
- 「both」を入れるとなぜかリンクの挙動がおかしくなるので（しばらく最後のリンク先にしか飛べなくなる）、各「div:nth-of-type」に「z-index」を付与しました。「div:nth-of-type(1)」が「z-index：6」で一番上にくるようにしています。この数字は絶対ではなく、「z-index」の数字が、
「div:nth-of-type(1)」＞「div:nth-of-type(2)」＞「div:nth-of-type(3)」……
となっていればOKです。
- 「.fadeslide」の「z-index: 0;」はなくても動くのですが、スタッキングコンテキストを生成するために入れておいた方がよさそう……？ なので入れました。
CSSで作るスライドショーのメリット
ほとんどのブラウザやデバイスで表示が可能です。上記はFirefox、Chrome、Edgeで表示を確認しました。
万が一動作しなかったとしても、プログラムエラーなどと違ってページ自体が表示されなくなるということはないはずです（スライドショー部分が表示されないだけ）。
CSSで作るスライドショーのデメリット
バナー画像を増やすたびに、CSSに「div:nth-of-type(7)」などを足していかないといけないことでしょうか。
バナー画像がものすごくたくさんある場合は、JavascriptやjQueryなどでスライドショーを作った方がよさそうです。
以前のバージョンのコード
年数が経ち、ベンダープレフィックスが不要になったようなので、新バージョンでは外しました。
また現代風（？）に、idを振るのではなく「nth-of-type」を使用することにしました。
関連記事：カルーセルタイプのスライダー（横スライドショー）
上と少しタイプが違いますが、このブログには以下のようなスライダーも所々に設置しています。
CSSのみで動く横スライダー
アイテム数が5～7個くらいの場合おすすめです。
【CSSのみ】カルーセル、横スライドショー【自動で動く】
jQueryを使った横スライダー
アイテム数が多い場合はこちらの方がいいかもしれません。
【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】
こちらの記事ともども、スライドショーを作成したい方のご参考になりましたら幸いです。
folder Web関連
tag スライドショー
