.NET開発者のためのブログメディア
HTMLで基本のスライドショーの作成方法とカスタマイズのやり方を解説
- SE
- スライドショーを実装できれば、ウェブサイトが一気にカッコよくなりますね！
- PL
- そうですね。一度自分で作っておくと、仕組みが分かるので応用も効きやすいですよ。
目次
HTMLで基本のスライドショーの作成方法とカスタマイズのやり方を解説
WEBサイトのトップページなどでよく見かけるスライドショーは、一見すると難易度が高そうですが、パターンを覚えると簡単に作ることができます。また、スライドショーはjQueryで自作したり既存のものを引用したり、CSSで作ることもできたりと、使い勝手が良いという一面を持っています。
知れば知るほど使いたくなるスライドショーについて、まずは基本的な使い方からマスターしていきましょう。
h2-スライドショーとは
多くのウェブサイトで使われているスライドショーですが、改めてどういったものか把握しておきましょう。
スライドショーとは、一言でいうと「複数の画像を順番に表示していく機能」です。スライドショーには、一定時間が経つと勝手に画像が切り替わるタイプと、ユーザーがボタンのクリックなど何かアクションを起こすことで画像が切り替わるタイプがあります。
スライドショーの大半がHTML、CSS、JavaScriptの基礎知識があれば作る事ができるので、ぜひ習得しておきましょう。
h2-HTMLページにスライドショーを実装する手段3つ
前述した通り、スライドショーの作成方法は複数あり、初心者の方でも作りやすいレイアウト方法の1つです。まずは元となるHTML、CSSを記述し、必要に応じてJavaScript、jQueryを加えていきます。
どうしても理解が難しいという方は、のちほど紹介する「jQueryのプラグインを利用する」のコード部分をコピー＆ペーストして使っていくと簡単にスライドショーを作る事ができます。
ここからは、スライドショーを実装する手段3つを順番に説明していきます。
1：JS・jQueryで自作する
3つの方法の中では最も難易度は高いですが、HTML、CSS、JavaScriptの基礎を理解していれば難しい事はありません。また、習得すると自分だけのスライドショーを作る事ができるという利点があります。
2：CSSで自作する
HTMLとCSSの知識があれば作ることができます。そのため、初心者の方でも習得しやすく、動作も軽いというメリットがあります。シンプルなスライダーを作成したいときにおすすめの方法です。
3：JS・jQueryのプラグインを利用する
プラグインを利用する事によって、世界中で作られている様々なスライドショーを引用する事ができます。英語が多いところが少し難点ですが、使い方を覚えると多様性に溢れていますし、HTMLの知識しかないといった方でも、コピー＆ペーストだけでスライドショーを作成できるようになります。
jQueryで作る基本のスライドショー3つの手順
スライドショーを作成するには、以下3つのステップを踏む必要があります。
1. すべてのスライド（画像）を重ねて非表示にする
2. 1番目のスライドをフェードインで表示
3. 一定時間経過後、1番目のスライドをフェードアウトで非表示にし、2番目のスライドをフェードインで表示
これを繰り返していきます。では、それぞれ解説していきます。
1：全てのスライド（画像）を重ねて非表示にする
まずはコードを書いていきます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <script type="text/javascript" src="script.js"></script> <div class="slide"> <!--画像を用意--> <img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_1280.jpg" width="720" height="460"/> <img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_1280.jpg" width="720" height="460"/> <img src="https://cdn.pixabay.com/photo/2014/05/07/06/44/animal-339400_1280.jpg" width="720" height="460"/> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 |
.slide { position: relative; /* 親要素にrelativeを指定 */ } .slide img { position: absolute; /* absoluteで画像を重ねる */ display: none; /* 画像を非表示に非表示 */ } |
HTML内に表示したい画像を並べていきます。スライドショーは同じ位置にある画像を効果を付けて順番に表示する為、はじめに複数の画像を重ねておく必要があります。position: relative; とposition: abusolute; で画像を重ね、display: none; によって画像を非表示にしています。
次に、jQueryの出番です。
2：1番目のスライドをフェードインで表示
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { $('.slide').each(function() { // スライド（画像）の数を取得 var $slides = $(this).find('img'), slideNum = $slides.length, idx = 0; // 何番目か // idx番目目の画像をフェードイン $(".slide img").eq(idx).fadeIn(); }); }); |
findメソッドで画像の数を取得し、idx番目（最初は0番目）の画像をフェードインで表示しています。
3：一定時間経過後、1番目のスライドをフェードアウトで非表示にし、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 |
$(function() { $('.slide').each(function() { // スライド（画像）の数を取得 var $slides = $(this).find('img'), slideNum = $slides.length, currentIdx = 0; // 何番目か // 最初の画像をフェードイン $(".slide img").eq(currentIdx).fadeIn(); // 3秒後に次のスライドを表示 setTimeout(dispNextSlide, 3000); // 次のスライドを表示するメソッド function dispNextSlide() { var nextIdx = currentIdx + 1; // 最後のスライドの場合ははじめに戻る if (nextIdx > (slideNum - 1)) { nextIdx = 0 } // 現在のスライドをフェードアウト $(".slide img").eq(currentIdx).fadeOut(); // 次のスライドをフェードイン $(".slide img").eq(nextIdx).fadeIn(); // インデックスを更新 currentIdx = nextIdx; } }); }); |
.eq(currentIdx).fadeOut(); で現在のスライドをフェードアウトし、次のスライドを .eq(nextIdx).fadeIn(); でフェードインしています。このメソッドを定期的（ここでは3秒毎）に実行できるようにします。nextIdx が (slideNum – 1) を越えた時、nextIdxは0となり、処理が繰り返されます。これで、フェードを使ったスライドショーの完成です。
CSSでも作れるスライドショー3種
次はHTMLとCSSのみを使ったスライドショーの作成方法です。全体として記述量が少なく、慣れれば短時間で自作する事ができます。
今回は、横に自動で切り替わるパターンとフェードを使ったパターン、そしてクリックで切り替わるパターンの3種類のスライドショーを解説していきます。
1：横に切り替わるスライドショー
まず、HTMLとCSSのコードを書いていきます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div class="sample"> <ul> <li>要素1</li> <li>要素2</li> <li>要素3</li> </ul> </div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.sample ul{ display: flex; overflow-x: scroll; margin: 0; padding: 0; } .sample li{ min-width: 40%; margin: 10px; padding: 0; list-style: none; } |
- にdisplay:flex を指定して、横並びにします。要素が溢れたらスクロールを表示させる overflow-x: scroll を追加し、<li>に、min-width: 40%; で最小の横幅を指定します。
- SE
- 今までプラグインに頼っていましたが、これなら自作できそうです。
- PL
- 今回紹介したスライドショーは必要最低限の機能なので、好みに合わせてカスタマイズも楽しんでくださいね。
要素の合計が100％を超えないとスクロールにはなりません。ここでは40%なので3つ以上コンテンツが並ぶとスクロールが発生します。
min-widthで最小値を縛るのがポイントです。
2：フェードを使ったスライドショー
フェードの効いたスライドショーを作るには、animationプロパティを使います。では、コードを書いていきます。
HTML
|
1 2 3 4 5 6 7 |
<ul class="slider_fade"> <li><img src="./images/slider_01.jpg"></li> <li><img src="./images/slider_02.jpg"></li> <li><img src="./images/slider_03.jpg"></li> </ul> |
CSS
|
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 36 37 |
.slider_fade { position: relative; } .slider_fade > li { position: absolute; list-style: none; visibility: hidden; animation: anime_slider_fade 12s 0s infinite; } .slider_fade > li:nth-of-type(2) { animation-delay: 4s; } .slider_fade > li:nth-of-type(3) { animation-delay: 8s; } @keyframes anime_slider_fade { 0% { visibility: visible; opacity: 0; } 15% { opacity: 1; } 33.3% { opacity: 1; } 48.3% { opacity: 0; } 100% { opacity: 0; } } |
animation: anime_slider_fade 12s 0s infinite;
上記ではanime_slider_fadeというアニメーション名で、12s（秒）に渡って、0s（秒）後から、infinite（ここではinfiniteなので永久にループ）周すると終了する、という記述をしています。
animationプロパティには下記のように、より詳細に記述する事もできます。
要素 {
animation: ①-name ②-duration ③-timing ④-delay ⑤-iteration ⑥-direction ⑦-fill ⑧-play;
/*–内訳
①animation-name: アニメーション名; 要素にアニメーション名を指定します。
②animation-duration: 時間(値); アニメーションの1回分の時間を指定します。
③animation-timing-function: 値; アニメーションの変化(速度)のスタイルを指定します。
④animation-delay: 時間(値); アニメーションが開始するまでの時間を指定します。
⑤animation-iteration-count: 値; アニメーションの実行回数を指定します。
⑥animation-direction: 値; アニメーションの再生方向を指定します。
⑦animation-fill-mode: 値; アニメーションの実行前後のスタイルを指定します。
⑧animation-play-state: 値; アニメーションが再生中か一時停止状態かを指定します。
–*/
}
本題に戻ります。スライドする画像の枚数によって、「anime_slider_fade」のパーセント配分を調整する必要があります。ここでは3枚の画像をスライドしているため、100%を3等分した33.3%を区切りとしています。
@keyframes anime_slider_fade { の中で1つの画像が4秒間にどのくらいの割合で画像が出現し、消えていくかを記述しています。仮に設定が100秒だとすると15%は15秒という事になります。今回は0%から15%の間にopacityで透過率を上げてふわっと表示、区切りとなる33.3%から48.3%の間に透過率を下げてふわっと消しています。2枚目の画像は、animation-delayで指定された時間差によって、1枚目の画像が消え始めた頃に表示し始めるという動きになります。
この処理をinfinite（永久に）繰り返す事によって、スライドショーを流し続けることができます。
3：サムネイルのクリックで切り替わるスライドショー
スライダーのHTMLは、メインのスライダー用とサムネイルナビゲーション用の2つの対になるリスト(ul, li)を作ります。
メインスライダーとサムネイルスライダーは、フルワイドで隣接したレイアウトにします。このため、CSSのフレックスボックスを使用してメインスライダーとサムネイルスライダーをまとめるラッパー要素で括ります。
HTML
|
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 |
<div class="container"> <ul class="main-slider"> <li class="slide" id="slide-1"> <figure> <img src="画像URL"> </figure> <div class="meta"> <p class="title">スライドタイトル</p> <p class="desc">概要など</p> </div> </li> <!-- 以後、スライド(li)を固有のIDを付けて必要なだけ記述 --> </ul> <ul class="thumbnail-slider" role="navigation"> <li class="slide"> <a href="#slide-1"> <figure> <img src="画像URL"> </figure> </a> </li> <!-- 以後、メインスライダーと対になる数だけ記述 --> </ul> </div> |
続いて、cssを書いていきます。
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.container{ position:relative; margin:0 auto; height:40vw; display:flex; justify-content:center; } .main-slider{ position:relative; width:74vw; height:100%; overflow:hidden; } .thumbnail-slider{ position:relative; width:26vw; height:100%; line-height:0; overflow-y:auto; /* 垂直方向のスクロールを許可 */ } .thumbnail-slider .slide{ position:relative; height:20%; /* 5枚まで一度に表示 */ overflow:hidden; } .slide{ figure{ height:100%; img{ width: 100%; object-fit: cover; } } } /* アクティブなスライド */ .main-slider .slide:target{ z-index:3; /* 最前面にする */ } /* アニメーションで画像を表示 */ .main-slider .slide:target figure img{ animation: show 2.2s ease forwards; } |
ラッパー要素(.container)は、display:flex にし、ビューポートに対する適当な高さを指定しています。ここでは、表示幅に応じて可変（伸縮）するよう、レスポンシブ化しています。メインスライダー（.main-slider）のCSSは、フルワイドのサイズから隣接するサムネイルナビゲーションのスライダーの幅分（ここでは 100vw – 26vw）を空けておきます。
サムネイルナビゲーションのスライダーは、サムネイルが垂直に並び、サンプルでは5枚まで一度に表示し、それ以上ある場合はスクロールで表示されるようにしています。
サムネイルナビゲーションのスライドをクリックし、対応するメインスライドを表示するには、:target疑似プロパティを付けて表示させるためのCSSを構成します。
HTMLページにスライドショーを実装するのに使えるJS・jQueryプラグイン7選
上記CSSやjQueryを使った自作のスライドショーにはオリジナリティがある一方で、記述量が多い、習得に時間がかかる、などどいったデメリットもあります。
これから紹介するプラグインの方法を使うと、簡単にスライドショーを作る事ができます。各アイテム毎に解説していますので、初心者の方はまずはこちらから使いたいものを選んで利用していくのもおすすめです。
1：Flickity
Flickityはタッチデバイスに対応しており、マウスはもちろん、スマホやタブレットでのタッチ操作が可能となっています。JavaScriptライブラリの為、jQueryを使わず軽く動作する点も魅力です。
FlickityはGitHubでダウンロードすることができます。利用するには、まずはライブラリを入手して下さい。
https://github.com/metafizzy/flickity
ダウンロードしたZIPファイル（flickity-master.zip）を解凍して下さい。flickity-masterというフォルダの中にライブラリの一式が含まれています。その中で利用するのは、
・flickity.pkgd.js
・flickity.css
の2ファイルのみです。これらをHTMLで読み込んでください。ダウンロードはmin版（軽量版）でもかまいません。
2：slick
slickはレスポンシブ・タッチデバイスに対応、オプション設定も豊富なスライダープラグインで人気を集めています。こちらもGitHubからダウンロードすることができます。
http://kenwheeler.github.io/slick/
ダウンロード後、下記5ファイルを設置し、HTMLで読み込んで下さい。
・ajax-loader.gif
・fonts（フォルダ）
・slick-theme.css
・slick.css
・slick.min.js
3：Siema
初心者の方におすすめなのが、このSiemaです。ダウンロード後のファイルが1つしかないので分かりやすく、JavaScriptライブラリであるため非常に軽いです。
導入後、HTML内のheadタグに
と記述するだけなので、非常にシンプルです。
Siemaのダウンロードはこちらです。
https://pawelgrzybek.com/siema/
4：Owl Carousel 2
Owl Carousel2はレスポンシブ対応に優れたjQueryプラグインです。タッチパネルに対応している点はもちろん、PC、ダブレット、スマホに合わせて、アイテムの表示する数を変更出来るという機能を持っています。
ダウンロードは下記になります。
https://owlcarousel2.github.io/OwlCarousel2/
ダウンロード後、3つのファイルを配置し、HTMLで読み込んで下さい。
・owl.carousel.css
・owl.theme.default.css
・owl.carousel.js
5：bxSlider
bxsliderはファイル容量が小さい軽量設計で、動画を含めた表示が可能なjQueryプラグインです。まずは下記URLからzipファイルをダウンロードしましょう。
https://bxslider.com/
ファイルは、基本的に必要なのはスクリプトの［jquery.bxslider.min.js］とスタイルシートの「jquery.bxslider.css」の2点になります。あとはHTML内にこの2点を記述すれば完了です。
6：jQuery Brazzers Carousel Plugin
こちらもjQueryプラグインですが、画像内を左右にホバーしながら切り替えていけるので、サクサク眺められる点がメリットです。また、画像が切り替わると同時に、下部にあるナビゲーションバーも連動して移動するので、バーの長さによって画像の枚数がどのくらいあるのか分かりやすくなっているところも魅力と言えます。
ダウンロード後、HTML内にCSSとプラグインのjQueryファイルを読み込んで、マークアップするだけですぐに実装する事が可能です。
http://agragregra.github.io/Brazzers-Carousel/
7：Glide
Glide.jsは他のスクリプトに依存性がないJavaScript ES6で実装されたプラグインで、カスタマイズ性にも優れています。こちらからダウンロードする事ができます。
https://glidejs.com/
ダウンロード後は、以下の3ファイルを設置、HTMLで読み込んで下さい。
・glide.core.min.css
・glide.theme.min.css
・glide.min.js
HTMLページにスライドショーを追加して見栄えの良いサイトを作ろう
HTML、CSS、JavaScript、jQueryを使ったスライドショーの説明をしてきましたが、いかがだったでしょうか。スライドショーには他にもいろいろなプラグイン存在しますし、自作に慣れるとオリジナルのスライドショーを作る事もできるため奥が深い世界です。
HTMLにスライドショーを追加して、見栄えの良いサイトを作りましょう。
