1. ホーム
  2. ホームページの作り方
  3. 無料で使えるデモサイト
  4. メイン画像にスライダーを設置

メイン画像にスライダーを設置

メイン画像にスライダーを設置

前回でheader部分を仕上げましたので、今回はホームページのメインヴィジュアルとなる全面表示のスライダーを設置していきます。

デモサイトでは「slick」というjQueryプラグインを使ってスライダーを実装していきます。はじめての方もカスタマイズが簡単にできるのでオススメです。

こちらの「デモサイト」から実際のページを確認して頂けます。

目次 [閉じる]

slickに必要なファイルをダウンロードする

スライダーをホームページに実装するにはjQueryであらかじめ作られたシステムを設置する事で簡単に導入できます。

JSと聞くと複雑なのでなかなか手が出ないという方も多いですが、今回、デモサイトでも使っている「slick」を使えばいろんな設定を自分好みにカスタマイズする事も可能です。

まずはslickを動かすCSSファイルとJSファイルが必要になりますので、「使い勝手の良い万能スライダー！slickのサンプル・カスタマイズをご紹介」を参考にファイルをダウンロードしてください。

slickをダウンロードするとファイルがいくつも入っているんですが、今回のデモサイトで使用するのは「slick.css」「slick-theme.css」「slick.min.js」の3ファイルです。

こちらも見てください

スライダーをHTMLで構築する

スライダーのタグはシンプルなので特に問題ないと思います。下記のコードをコピペしておきましょう。

index.html

                	
    
                        
  1. <main>
    2. 
                        
  2.   <div class="mainVisualWrap">
    3. 
                        
  3.     <ul class="slider">
    4. 
                        
  4.       <li class="slider01"><img src="./img/slide01.jpg" alt="いやしのカレー サンプルのカレー"></li>
    5. 
                        
  5.       <li class="slider02"><img src="./img/slide02.jpg" alt="いやしのカレー サンプルのお店"></li>
    6. 
                        
  6.     </ul>
    7. 
                        
  7.   </div>
    8. 
                        
  8. </main>
    9.

デモサイトではheader（ヘッダー）とfooter（フッター）以外のメインコンテンツを「main」タグで囲っています。

実質、スライダーのタグとしては「mainVisualWrap」のクラス名が付いたdivの中身のみです。中身は表示したい画像をliタグで並べているだけなのでわかりやすいですね。

デモサイトでは2枚の画像を切り替えて表示しているんですが、画像の制限はないのでご希望の枚数を表示して頂く事ができます。

スライダー部分もレスポンシブ仕様なのでパソコンとスマホでデザインが変更します。今回は画像を表示しているだけなので難しくないですが、パソコン用とスマホ用の画像を2種類用意して頂く必要があります。

パソコン用では横長の画像、スマホ用では縦長の画像です。サイズは小さ過ぎると引き伸ばした時に荒れてしまいますので、大きめに作っておく方が良いです。

デモサイトの画像はこちらでダウンロードできます。→「パソコン用スライダー画像01のダウンロード」「パソコン用スライダー画像02のダウンロード」「スマホ用スライダー画像01のダウンロード」「スマホ用スライダー画像02のダウンロード」

スライダーをCSSで調整する

次にパソコンとスマホそれぞれのデザインをCSSに記述していきます。

style.css

                	
    
                    	
  1. /* ------ main visual ------ */
                    	
  2. .mainVisualWrap {
    3. 
                    	
  3.   width: 100%;
    4. 
                    	
  4.   min-width: 1200px;
    5. 
                    	
  5.   height: 100vh;
    6. 
                    	
  6.   position: relative
    7. 
                    	
  7. }
    8. 
                    	
  8. .mainVisualWrap .slider {
    9. 
                    	
  9.   height: 100vh;
    10. 
                    	
  10.   overflow: hidden
    11. 
                    	
  11. }
    12. 
                    	
  12. .mainVisualWrap .slider img {
    13. 
                    	
  13.   max-width: initial;
    14. 
                    	
  14.   height: 100vh
    15. 
                    	
  15. }
    16. 
                    	
  16. @media screen and (max-width: 768px) {
    17. 
                    	
  17.   .mainVisualWrap {
    18. 
                    	
  18.     min-width: inherit;
    19. 
                    	
  19.     height: 560px
    20. 
                    	
  20.   }
    21. 
                    	
  21.   .mainVisualWrap .slider { height: 560px }
    22. 
                    	
  22.   .mainVisualWrap .slider img { display: none }
    23. 
                    	
  23.   .mainVisualWrap .slider li { height: 560px }
    24. 
                    	
  24.   .mainVisualWrap .slider .slider01 {
    25. 
                    	
  25.     background: url("../img/slide01_sp.jpg") no-repeat;
    26. 
                    	
  26.     background-size: cover
    27. 
                    	
  27.   }
    28. 
                    	
  28.   .mainVisualWrap .slider .slider02 {
    29. 
                    	
  29.     background: url("../img/slide02_sp.jpg") no-repeat;
    30. 
                    	
  30.     background-size: cover
    31. 
                    	
  31.   }
    32. 
                    	
  32. }
    33.

スマホ用のデザイン部分で「.mainVisualWrap .slider img」を「display:none」にしていますね。これはliタグ内の画像（img）を非表示にしているという事です。

パソコンのみ横長の画像を表示して、スマホではこの画像を非表示にする。そして「slider01」「slider02」のクラス名を持つそれぞれのliタグに背景としてスマホ用の画像を読み込んでいます。

あとは「min-width」や「max-width」の値に「initial」と指定しています。このinitialは「初期値」という意味です。

widthなどは「100%」であったり、「1200px」であったりと数値で指定するものと思われるかと思いますが、文字列で指定することも可能です。

何も設定していない初期値は「auto」となり、widthなどは中身のコンテンツによって自動で決まります。今回は「100%」の値などを「auto」に戻したという意味になります。

竹馬

細かい部分も含めるとCSSで設定できる事っていうのはメチャメチャあります。ホームページを作りながらちょっとずつ覚えていってください。僕もいまだに知らない事だらけです（笑）。

スライダーをカスタマイズする

スライダーのカスタマイズはJSファイルに書いていきます。記述もそんなに難しくないので内容を確認してみてください。

main.js

                    
    
                        
  1. // slider
    2. 
                        
  2. (function($) {
    3. 
                        
  3.   $(document).ready(function(){
    4. 
                        
  4.     $('.slider').each(function() {
    5. 
                        
  5.       $(this).slick({
    6. 
                        
  6.         arrows: false,
    7. 
                        
  7.         dots: false,
    8. 
                        
  8.         speed: 1500,
    9. 
                        
  9.         autoplaySpeed: 6000,
    10. 
                        
  10.         autoplay: true,
    11. 
                        
  11.         infinite: true,
    12. 
                        
  12.         pauseOnHover: false,
    13. 
                        
  13.         fade: true,
    14. 
                        
  14.         swipe: false
    15. 
                        
  15.       });
    16. 
                        
  16.     });
    17. 
                        
  17.   });
    18. 
                        
  18. })(jQuery);
    19.

カスタマイズとして設定しているのは「arrows」～「swipe」までの部分です。デモサイトでの設定を見ていきましょう。

「arrows」はスライダーの左右に「次の画像」や「前の画像」に切り替えるための矢印を表示する事ができますが、ここでは「false」として矢印は出さないように設定しています。

「dots」ではスライダー画像の下に丸い点（●）が画像の枚数分表示されて、各画像へ切り替える事ができます。この設定も今回は無しにしています。

「speed」は次の画像へと切り替わる時間です。ゆっくり変わるか早く変わるかの設定です。「autoplaySpeed」は画像の表示時間です。紛らわしいですが意味は違いますので気を付けてくださいね。

そして「autoplay」を「true」にして自動再生をおこなっていて、それに「infinite」も加えて無限ループにしています。

「pauseOnHover」を設定すると画像の上にマウスを乗せた状態ならスライドを停止させる事ができます。が、今回は「false」としてこの機能は使用しません。

散々、スライダーの設定と言ってますが、デモサイトでは「fade」の設定をしています。スライドじゃなくてゆっくりと次の画像に切り替わるフェードの動きを使用しています。

最後は「swipe」ですが、これも「false」にしています。これを設定するとスワイプすれば前後の画像に切り替える事ができます。

記述したHTMLとCSSとJSの確認

はい、スライダー部分の設定は以上ですが上手く動作していますでしょうか？最後に各ファイルのコードとファイルの階層を確認しておきましょう。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. ～head内の記述省略～
    5. 
                        
  5. </head>
    6. 
                        
  6. <body>
    7. 
                    	
  7. <header>
    8. 
                     	
  8. ～headerの記述省略～
    9. 
                    	
  9. </header>
    10. 
                        
  10. <main>
    11. 
                        
  11.   <div class="mainVisualWrap">
    12. 
                        
  12.     <ul class="slider">
    13. 
                        
  13.       <li class="slider01"><img src="./img/slide01.jpg" alt="いやしのカレー サンプルのカレー"></li>
    14. 
                        
  14.       <li class="slider02"><img src="./img/slide02.jpg" alt="いやしのカレー サンプルのお店"></li>
    15. 
                        
  15.     </ul>
    16. 
                        
  16.   </div>
    17. 
                        
  17. </main>
    18. 
                        
  18. ～JSファイルの読み込み省略～
    19. 
                        
  19. </body>
    20. 
                        
  20. </html>
    21.

style.css

                	
    
                    	
  1. ～共通デザイン省略～
    2. 
                    	
  2. ～headerデザイン省略～
    3. 
                    	
  3. ～navデザイン省略～
    4. 
                    	
  4. /* ------ main visual ------ */
    5. 
                    	
  5. .mainVisualWrap {
    6. 
                    	
  6.   width: 100%;
    7. 
                    	
  7.   min-width: 1200px;
    8. 
                    	
  8.   height: 100vh;
    9. 
                    	
  9.   position: relative
    10. 
                    	
  10. }
    11. 
                    	
  11. .mainVisualWrap .slider {
    12. 
                    	
  12.   height: 100vh;
    13. 
                    	
  13.   overflow: hidden
    14. 
                    	
  14. }
    15. 
                    	
  15. .mainVisualWrap .slider img {
    16. 
                    	
  16.   max-width: initial;
    17. 
                    	
  17.   height: 100vh
    18. 
                    	
  18. }
    19. 
                    	
  19. @media screen and (max-width: 768px) {
    20. 
                    	
  20.   .mainVisualWrap {
    21. 
                    	
  21.     min-width: inherit;
    22. 
                    	
  22.     height: 560px
    23. 
                    	
  23.   }
    24. 
                    	
  24.   .mainVisualWrap .slider { height: 560px }
    25. 
                    	
  25.   .mainVisualWrap .slider img { display: none }
    26. 
                    	
  26.   .mainVisualWrap .slider li { height: 560px }
    27. 
                    	
  27.   .mainVisualWrap .slider .slider01 {
    28. 
                    	
  28.     background: url("../img/slide01_sp.jpg") no-repeat;
    29. 
                    	
  29.     background-size: cover
    30. 
                    	
  30.   }
    31. 
                    	
  31.   .mainVisualWrap .slider .slider02 {
    32. 
                    	
  32.     background: url("../img/slide02_sp.jpg") no-repeat;
    33. 
                    	
  33.     background-size: cover
    34. 
                    	
  34.   }
    35. 
                    	
  35. }
    36.

main.js

                    
    
                        
  1. ～sp nav設定省略～
    2. 
                        
  2. // slider
    3. 
                        
  3. (function($) {
    4. 
                        
  4.   $(document).ready(function(){
    5. 
                        
  5.     $('.slider').each(function() {
    6. 
                        
  6.       $(this).slick({
    7. 
                        
  7.         arrows: false,
    8. 
                        
  8.         dots: false,
    9. 
                        
  9.         speed: 1500,
    10. 
                        
  10.         autoplaySpeed: 6000,
    11. 
                        
  11.         autoplay: true,
    12. 
                        
  12.         infinite: true,
    13. 
                        
  13.         pauseOnHover: false,
    14. 
                        
  14.         fade: true,
    15. 
                        
  15.         swipe: false
    16. 
                        
  16.       });
    17. 
                        
  17.     });
    18. 
                        
  18.   });
    19. 
                        
  19. })(jQuery);
    20.

ダウンロードしたスライダーの画像はすべて「img」フォルダに入れておきましょう。

デモサイトの階層

使用するファイルもほぼほぼ出揃いましたね。あとは画像をもう少し足して、最後のお問い合わせフォームで使うファイルを加えるくらいです。

これでheaderとスライダーが完成です。スライダーもちゃんと動作しているかご確認ください。JSファイルに余計な文字などがあると動かないので注意してください。

それでは次はメインコンテンツの「お知らせ」部分を作っていきます。これは簡単なんでサクッと仕上げていきましょう。

ハンバーガーメニューの設置【SP】 お知らせに新着情報を表示する

よく読まれている記事

おすすめの記事

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ！Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。

チェピレア日記