記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

レスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)

Webサイトにレスポンシブレイアウトのスライダーを実装する方法をまとめます。HTML/CSSで実装する方法や、jQuery(JavaScript)を使う方法などが一般的ですので、それぞれの手順を解説。また、おすすめのjQueryライブラリについても3つご紹介します。

カテゴリ: JS/jQuery

コーポレートサイトやECサイトなどのTOP画面として目に飛び込んでくる「スライダー」

目にしたことがある方も多いと思います。

さまざまな方針のWebサイトで使用されるUIであるスライダーは、Web制作を行う上で欠かせないものになってきています。

「カルーセル」や「スライドショー」のような呼ばれ方をするものも、名前が違うだけでスライダーと機能は同じだということはご存知でしょうか。本記事では名称を「スライダー」で統一します。

今回は以下の流れでレスポンシブなスライダーを作る方法について解説します。

レスポンシブなスライダーの作り方

TOP画面にスライダーを実装して!

Web制作をやっていると、クライアントにこのような指示をされることは珍しくありません。

スライダーを実装するとなると、JQueryプラグインを使った実装を考える方も多いでしょう。

JQueryプラグインを使ったレスポンシブスライダーの実装は初心者でも取り組みやすく、ルールに基づいてコーディングをすればレスポンシブになります。

ですが、レスポンシブなスライダーは以下の2つの方法でも実装することができます。

  • HTML/CSSでの実装
  • HTML/CSS/Javascript(JQuery)での実装

今回は初心者の方でも使いやすいJQueryプラグインを主に紹介しますが、把握しておくべきそれぞれの実装方法のメリットも解説します。

HTML/CSSでの実装

HTML/CSSでレスポンシブスライダーを実装する場合、以下の2種類の方法があります。

  • 1から自分でHTML/CSSを書く
  • CSSプラグインを導入する

HTML/CSSだけと聞くと「静的サイトの中で自動に動くスライダーを作れるの?」と思う方もいるかもしれません。HTML/CSSだけのWebサイトは確かに静的サイトですが、CSSのアニメーション機能を使えば、自動で動いたり、デバイス幅に合わせて変化するレスポンシブデザインだったりと多くの方が想定するスライダーを実装することができます。

ただし、Javascript(JQuery)を使ったりJQueryプラグインを使ったりするスライダーと比較すると、どうしても動的な要素や機能の面で劣ってしまうのは事実です。

HTML/CSSのみでレスポンシブスライダーを実装するとしたら、特に高度な機能を必要としておらずただ画像の変化を求めている時に利用するのがおすすめです。

HTML/CSS/Javascript(JQuery)での実装

JQueryプラグインを使ったスライダーの実装が人気な一方で、HTML/CSS/Javascript(JQuery)を1から自分でコーディングする方法もあります。

全て1から自分でコーディングするメリットは、カスタマイズのしやすさです。JQueryプラグインを使ったスライダーの実装は手軽ですが、カスタマイズをする際にはCSSやJavascript(JQuery)の知識が求められることも多いです。また、JQueryプラグインを使用したスライダーを実装する場合、ブラウザごとに表示を切り替えられないこともあります。

  • 公開されているプラグインでは高機能すぎる
  • クライアントの意向に合わせてカスタマイズしたい
  • IEに対応しているスライダーを実装する必要がある
  • レスポンシブ対応をしているシンプルなJQueryプラグインがない

上記の3つのどれかで当てはまった場合、JQueryプラグインではなくHTML/CSS/Javascript(JQuery)を1からコーディングする方法でスライダーを実装するのがよいでしょう。

JQueryプラグインによる実装

レスポンシブなスライダーの実装と聞いたら、ほとんどの方が考える手段がJQueryプラグインを使った実装でしょう。

JQueryプラグインを使ってスライダーを作るメリットは、初心者の方でも手順通りに行えば簡単にレスポンシブスライダーを実装できることです。

JQueryプラグインは、スライダーを実装する上で求める機能のほとんどを網羅しています。機能だけではなく、モバイルフレンドリーな現代に欠かせないレスポンシブデザインも搭載されていることがほとんどです。

そのため「JavascriptやJQueryはよくわからない…」という方でも高機能なスライダーを実装できます。

JQueryプラグインは豊富な種類が無料公開されているため、求めている機能別にJQueryプラグインを使い分けるのもおすすめです。

レスポンシブスライダーを実装するJQueryプラグイン3選

ここからは初心者の方でも扱いやすく、簡単にレスポンシブスライダーを実装できるJQueryプラグインを厳選して紹介します。

プラグイン①Swiper

SwiperはAdobeやBMW、Disneyなどの大手企業でも使用されているJQueryプラグインです。

特徴的なのは、他のJQueryプラグインよりもモダン寄りなデザインであることです。SwiperはPC版と他のデバイスでの表示形式を変更することもできます。そのため、モダンでレスポンシブなスライダーを実装したいのであればSlickを選ぶことがおすすめです。

実装に必要なコード

Swiperの実装に必要な手順は以下の4点だけです。

  • headタグ内でcssを読み込ませる
  • body要素の終わりでJQuery/JQueryファイルを読み込ませる
  • HTMLのフォーマットに従ってコードを書く
  • 起動するためのscriptを書く

まず、swiper専用のcssファイルをHTMLに読み込ませます。

JQueryプラグインを使用するために必要なJQueryファイルをbody要素の終わりで読み込みます。

各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。

最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。

このプラグインのおすすめポイント

  • アニメーションが豊富
  • カスタマイズしやすい
  • モダンブラウザでの動作が安定している

プラグイン②slick

さまざまなJQueryプラグインがある中でも、安定して評価が高いプラグインがslickです。

slickは「JQueryプラグインをはじめて使う」という方でも手軽に使いやすく、必要とする機能のほとんどを搭載している万能なJQueryプラグインです。

Swiperと同様にブレイクポイントを指定すれば、デバイスの表示幅によってレスポンシブに画像サイズが変化します。また、スマートフォンやタブレットでスワイプ機能を搭載するかどうかも設定できます。

実装に必要なコード

slickは非常にシンプルなコードを記載するだけでレスポンシブスライダーを実装できます。

実装に必要な手順は以下の5点だけです。

  • slickの公式サイトから素材をダウンロードする
  • headタグ内でcssを読み込ませる
  • body要素の終わりでJQuery/JQueryファイルを読み込ませる
  • HTMLのフォーマットに従ってコードを書く
  • 起動するためのscriptを書く

slickの公式サイトからダウンロードが完了した後の手順をご紹介します。

まず必要なのは、slick専用のcssファイルをHTMLに読み込ませることです。

JQueryプラグインを使用するために必要なJQuery本体とJQueryファイルをbody要素の終わりで読み込みます。

CSS/JQueryファイルの読み込みはslick公式が公開しているCDNを使うことでも実行できます。ただしカスタマイズの幅が狭まることは把握しておきましょう。

各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。

最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。

このプラグインのおすすめポイント

  • JQueryを触ったことがない人でも手軽に使える
  • 各ブラウザや画面幅での動作が安定している

プラグイン③Fullscreen Slit Slider

数あるJqueryプラグインの中でも、Fullscreen Slit Sliderは特にアニメーション要素が強いプラグインです。

他のJqueryプラグインと同様にレスポンシブスライダーを実装可能な上に、カスタマイズすることでフルスクリーン対応もできます。

「インパクトのあるTOP画面にしたい!」

このような要望が来た場合に、まず最初に候補に上がるレスポンシブスライダーのプラグインです。

機能面が優れている半面、JQueryやJavascriptの知識が必要になるためこれらを勉強したことがある方におすすめです。

実装に必要なコード

slickは非常にシンプルなコードを記載するだけでレスポンシブスライダーを実装できます。 実装に必要な手順は以下の5点だけです。

  • Fullscreen Slit Sliderの公式サイトから素材をダウンロードする
  • headタグ内でcssを読み込ませる
  • body要素の終わりでJQuery/JQueryファイルを読み込ませる
  • HTMLのフォーマットに従ってコードを書く
  • 起動するためのscriptを書く

からダウンロードが完了した後の手順をご紹介します。

まずは専用のcssファイルをHTMLに読み込ませます。

JQueryプラグインを使用するために必要なJQuery本体とJQueryファイルをbody要素の終わりで読み込みます。

各ファイルの読み込みを指定したらHTMLを記載します。スライダーで表示したい要素をyour content に置き換えます。

最後にbody要素の終わりか別途scriptファイルでslickを起動させるコードを書きます。

このプラグインのおすすめポイント

  • インパクトを与えるスライダーを作れる
  • カスタマイズの幅が広い

まとめ

レスポンシブなスライダーを作る方法と、初心者の方にもおすすめできるJQueryプラグインを3つご紹介しました。

各デバイスに対応したレスポンシブなスライダーは、今やコーポレートサイトやECサイトだけではなく、さまざまな種類のWebサイトで使われています。

スライダーを1から作ることはカスタム性に長ける半面、どうしても時間のロスが発生します。特に初心者の方は苦戦することが多いでしょう。 正確さとスピードを求められがちなWeb制作では、必要に応じてプラグインを導入する必要があります。

今回ご紹介させていただいたJQueryプラグインは、レスポンシブなスライダーを作れるプラグインのほんの一部です。搭載したい機能なデザイン性など、さまざまな要素に対応できるプラグインはまだまだあります。

どのプラグインがいいか迷った時は、本記事で紹介した内容を参考にして見てください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。