.net column
.NET開発者のためのブログメディア

写真

HTMLで基本のスライドショーの作成方法とカスタマイズのやり方を解説

2020年08月07日
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

CSS

HTML内に表示したい画像を並べていきます。スライドショーは同じ位置にある画像を効果を付けて順番に表示する為、はじめに複数の画像を重ねておく必要があります。position: relative; とposition: abusolute; で画像を重ね、display: none; によって画像を非表示にしています。

次に、jQueryの出番です。

2:1番目のスライドをフェードインで表示

script.js

findメソッドで画像の数を取得し、idx番目(最初は0番目)の画像をフェードインで表示しています。

3:一定時間経過後、1番目のスライドをフェードアウトで非表示にし、2番目のスライドをフェードインで表示

.eq(currentIdx).fadeOut(); で現在のスライドをフェードアウトし、次のスライドを .eq(nextIdx).fadeIn(); でフェードインしています。このメソッドを定期的(ここでは3秒毎)に実行できるようにします。nextIdx が (slideNum – 1) を越えた時、nextIdxは0となり、処理が繰り返されます。これで、フェードを使ったスライドショーの完成です。

CSSでも作れるスライドショー3種

次はHTMLとCSSのみを使ったスライドショーの作成方法です。全体として記述量が少なく、慣れれば短時間で自作する事ができます。

今回は、横に自動で切り替わるパターンとフェードを使ったパターン、そしてクリックで切り替わるパターンの3種類のスライドショーを解説していきます。

1:横に切り替わるスライドショー

まず、HTMLとCSSのコードを書いていきます。

HTML

CSS

    にdisplay:flex を指定して、横並びにします。要素が溢れたらスクロールを表示させる overflow-x: scroll を追加し、&ltli>に、min-width: 40%; で最小の横幅を指定します。

    要素の合計が100%を超えないとスクロールにはなりません。ここでは40%なので3つ以上コンテンツが並ぶとスクロールが発生します。

    min-widthで最小値を縛るのがポイントです。

    2:フェードを使ったスライドショー

    フェードの効いたスライドショーを作るには、animationプロパティを使います。では、コードを書いていきます。

    HTML

    CSS

    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

    続いて、cssを書いていきます。

    ラッパー要素(.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

    SE
    今までプラグインに頼っていましたが、これなら自作できそうです。
    PL
    今回紹介したスライドショーは必要最低限の機能なので、好みに合わせてカスタマイズも楽しんでくださいね。

    HTMLページにスライドショーを追加して見栄えの良いサイトを作ろう

    HTML、CSS、JavaScript、jQueryを使ったスライドショーの説明をしてきましたが、いかがだったでしょうか。スライドショーには他にもいろいろなプラグイン存在しますし、自作に慣れるとオリジナルのスライドショーを作る事もできるため奥が深い世界です。

    HTMLにスライドショーを追加して、見栄えの良いサイトを作りましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags