HTML&CSS

HTMLとCSSのみでWebサイト用のスライドショーを作る／ボタン付きの場合の解説も

ズームイン、ズームアウトしながら画像が切り替わるスライドショーと、流れるスライドショーについて、jQueryなどのライブラリはおろかJavaScriptなしで作る方法についてご紹介します。

一気に説明せず、ひとつひとつの要素に分けてご説明していきます。

目次

  1. HTMLとCSSだけで画像が切り替わるスライドショー
    1. （１）基本形
    2. （２）上に半透明の矩形を重ねる
    3. （３）テキストを乗せる
    4. （４）角丸をつける、画像の大きさを変える
    5. （５）画像の表示位置を変える
  2. HTMLとCSSだけで画像が流れるスライドショー
    1. 縦に流れるスライドショー
    2. 横に流れるスライドショー
    3. マウスオーバー（ホバー）時に止める
  3. スライドショーにボタンを付ける場合
    1. ボタンを付けるには
    2. ソースコード
  4. まとめ
SEOに強いAIライティングツール「BringRitera」 SEOに強いAIライティングツール「BringRitera」

HTMLとCSSだけで画像が切り替わるスライドショー

（１）基本形

次のようなスライドショーをCSSだけで作成できます。

ソースコード

HTML
  1. <style><div class="img-frame">
  2.    <div class="img-01"></div>
  3.    <div class="img-02"></div>
  4.    <div class="img-03"></div>
  5. </div>
CSS
  1. .img-frame{
  2.    position: relative;
  3.    width: 70%;
  4.    height: 300px;
  5.    overflow: hidden;
  6.    margin: 0 auto;
  7. }
  8. @media screen and (max-width: 767px){
  9. .img-frame{
  10.    width: 100%;
  11.    height: 200px;
  12. }
  13. .img-01, .img-02, .img-03{
  14.    position: absolute;
  15.    top:0;
  16.    left:0;
  17.    width: 100%;
  18.    height: 100%;
  19.    background-size: cover;
  20.    background-repeat: no-repeat;
  21. }
  22. .img-01{
  23.    background-image: url('画像の場所');
  24.    animation: slide-animation-01 24s infinite;
  25. }
  26. .img-02{
  27.    background-image: url('画像の場所');
  28.    animation: slide-animation-02 24s infinite;
  29. }
  30. .img-03{
  31.    background-image: url('画像の場所');
  32.    animation: slide-animation-03 24s infinite;
  33. }
  35. @keyframes slide-animation-01 {
  36.     0% {opacity: 1; transform: scale(1.0);}
  37.   30% {opacity: 1;}
  38.   40% {opacity: 0; transform: scale(1.15);}
  39.   90% {opacity: 0}
  40. 100% {opacity: 1; transform: scale(1.0);}
  41. }
  42. @keyframes slide-animation-02 {
  43.     0% {opacity: 0;}
  44.   30% {opacity: 0; transform: scale(1.1);}
  45.   40% {opacity: 1;}
  46.   60% {opacity: 1;}
  47.   70% {opacity: 0; transform: scale(1.0);}
  48. 100% {opacity: 0;}
  49. }
  50. @keyframes slide-animation-03 {
  51.     0% {opacity: 0;}
  52.   60% {opacity: 0;  transform: scale(1.0);}
  53.   70% {opacity: 1;}
  54.   90% {opacity: 1;}
  55. 100% {opacity: 0; transform: scale(1.1);}
  56. }

解説

以下、CSSセレクタで対象要素を説明します。

  • .img-frameで外枠を作っています。外枠の大きさをwidth: 70%、height: 300pxとしていますが、そこは好きな大きさにできるところです。
  • 画像3枚は.img-01、.img-02、.img-03のそれぞれに背景画像として指定しています。ここはimg要素を使って普通に画像にしても実現可能なのですが、背景画像にした方がカスタマイズ性が高くできます。どのようにカスタマイズ性が違うのかは後述します。
  • .img-frameにoverflow: hiddenを指定して、内枠の背景画像がはみ出した分を非表示にします。
  • .img-01、.img-02、.img-03はそれぞれ、position: absoluteとして、外枠に対して同じ位置で表示されるようにします。
  • .img-01、.img-02、.img-03それぞれに同じ時間（この例では24秒間ですが、好きな長さに設定可能）のanimationをつけています。3枚それぞれをCSSのanimationで、拡大縮小、透明度の変化をつけることでこのスライドショーが実現できます。

（２）上に半透明の矩形を重ねる

次のように上に半透明の矩形を乗せることもCSSで可能です。

ソースコード

先ほどの（１）のCSSに対して、以下の追記をすればこうなります。

CSS
  1. .img-frame::after{
  2.    content: '';
  3.    position: absolute;
  4.    top: 0;
  5.    left: 0;
  6.    width: 100%;
  7.    height: 100%;
  8.    background-color: rgba(0, 0, 0, .5);
  9. }

解説

外枠に疑似要素を指定して、position: absolute;で外枠と同じ位置に半透明の矩形を乗せています。

（３）テキストを乗せる

次のようなこともCSSだけでできます。

京都

横浜

良い街

ソースコード

（１）のHTMLを次のように変え、疑似要素で付けている半透明の上に乗せた矩形は、外枠ではなく.img-03につける形に変更です。それ以外のCSSは（１）に対する追記です。

HTML
  1. <div class="img-frame">
  2.    <div class="img-01"><p class="msg msg-01">京都</p></div>
  3.    <div class="img-02"><p class="msg msg-02">横浜</p></div>
  4.    <div class="img-03 cover"><p class="msg msg-03">良い街</p></div>    
  5. </div>
CSS
  1. .msg{
  2.    font-size: 20px;
  3.    color: #fff;
  4.    position: absolute;
  5.    top: 50%;
  6.    left: 50%;
  7.    transform: translate(-50% , -50%);
  8. }
  10. .msg-01, .msg-02{
  11.     text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
  12. }
  14. .img-03.cover::after{
  15.    content: '';
  16.    position: absolute;
  17.    top: 0;
  18.    left: 0;
  19.    width: 100%;
  20.    height: 100%;
  21.    background-color: rgba(0, 0, 0, .7);
  22. }
  24. .msg-03{
  25.    z-index:1;
  26. }

解説

半透明の矩形を外枠に対してつけるのではなく、内枠の背景画像の3番目に対して付けてます。

テキストの位置は、position: absolute;で外枠に対して中央に配置しています。

（４）角丸をつける、画像の大きさを変える

京都

横浜

良い街

ソースコード

（３）のソースコードのCSSに以下の変更／追記をするだけです。

CSS
  1. .img-frame{
  2.    width: 100%;
  3.    height: 200px;
  4.    clip-path: inset(0 round 0 0 0 50px);
  5. }

解説

外枠のwidthを70%から100％に、heightを300pxから200pxに変えています。

また、外枠にclip-pathで角丸をつけています。

こういうのが、img要素ではなく背景画像を使ったときにカスタマイズ性が高くなるところです。

角丸はborder-radiusでも同様に外枠に対して指定すれば付けられるのですが、border-radiusだとiOSでは現時点、つきません。なので、clip-pathにしています。
こういうの最近多いですね、Appleさん。

（５）画像の表示位置を変える

スマホだと調整が大変なので、ここではPCでだけ変わるようにしています。PCで違いをご確認ください。

京都

横浜

良い街

ソースコード

（４）のソースコードのCSSに以下の追記をするだけです。上述の通り、ここではあえてPCでだけ変わるようにしています。

CSS
  1. @media screen and (min-width:768px){
  2.    .img-01{
  3.       background-position: 0 -250px;
  4.    }
  5.    .img-02{
  6.       background-position: 0 -200px;
  7.    }
  8.    .img-03{
  9.       background-position: 0 -200px;
  10.    }
  11. }

解説

背景画像の位置はbackground-positionで変更できるので、それを利用しています。

これもimage要素を使うとできないことです。image要素を使った場合はtransformプロパティを使ってトライすることになると思うんですが、思うようにいかないと思います（私はそうでした）。

これも注意点があって、iOSとAndroidで大きく表示位置が異なります・・なので、ここまでカスタマイズしようと思うと、ちょっと検証が大変ではあります。

HTMLとCSSだけで画像が流れるスライドショー

縦に流れるスライドショー

次のような流れるスライドショーもCSSだけでできてしまいます。

京都 横浜 良い街
京都 横浜 良い街
京都 横浜 良い街

ソースコード

HTML
  1. <div class="slide-container">
  2.    <div class="slide-wrapper">
  3.       <img class="slide" src="画像の場所" alt="京都">
  4.       <img class="slide" src="画像の場所" alt="横浜">
  5.       <img class="slide" src="画像の場所" alt="良い街">
  6.    </div>
  7.    <div class="slide-wrapper">
  8.       <img class="slide" src="画像の場所" alt="京都">
  9.       <img class="slide" src="画像の場所" alt="横浜">
  10.       <img class="slide" src="画像の場所" alt="良い街">
  11.    </div>
  12.    <div class="slide-wrapper">
  13.       <img class="slide" src="画像の場所" alt="京都">
  14.       <img class="slide" src="画像の場所" alt="横浜">
  15.       <img class="slide" src="画像の場所" alt="良い街">
  16.    </div>
  17. </div>
CSS
  1. .slide-container {
  2.   width: 700px;
  3.   display: flex;
  4.   align-items: center;
  5.   height: 340px;
  6.   overflow: hidden;
  7.   flex-direction: column;
  8. }
  10. .slide-wrapper {
  11.   display: flex;
  12.   flex-direction: column;
  13.   animation: slide-flow 20s infinite linear 1s both;
  14. }
  16. .slide{
  17.   width: 300px;
  18.   object-fit: cover;
  19.   border: 1px solid #ddd;
  20. }
  22. @keyframes slide-flow {
  23.      0% {transform: translateY(0);}
  24.  100% {transform: translateY(-100%);}
  25. }

解説

外枠をoverflow: hidden;にしてはみ出す部分を表示させないようにし、3×3で9枚の画像をループさせて3枚の画像だけがループしているように見せるという方法です。

横に流れるスライドショー

上述のCSSの中で.slide-containerと.slide-wrapperにつけているflex-direction: column;を削り（flex-direciton: row;にする）、animationの最終地点のところをtransform: translateY(-100％);からtransform: translateX(-100％);にすれば、横に流れる形になります。

スライド全体の幅は、.slide-containerのwidthで指定します。

京都 横浜 良い街
京都 横浜 良い街
京都 横浜 良い街 
  1. .slide-container {
  2.     width: 100%;
  3.     margin: 50px auto;
  4.     display: flex;
  5.     align-items: center;
  6.     overflow: hidden;
  7. }
  9. .slide-wrapper {
  10.   display: flex;
  11.   animation: slide-flow 20s infinite linear 1s both;
  12. }
  14. .slide{
  15.   width: 300px;
  16.   object-fit:cover;
  17.   border: 1px solid #ddd;
  18. }
  20. @keyframes slide-flow {
  21.      0% {transform: translateX(0);}
  22.  100% {transform: translateX(-100%);}
  23. }

マウスオーバー（ホバー）時に止める

.slide-containerに.slide-paused（名称は自由）などとクラス名を付与し、ホバー時に

animation-play-state: paused;

を指定することで、マウスオーバー（ホバー）時に動きを止めることができます。

ontouchstart=""はスマホのタップ時の挙動を決めるための記述です。

.slide-paused:hover .slide-wrapper img:hoverへのopacityとcursorの指定は、動きを止める部分ではなく、見た目の変更です。なくても動きは止まります。

HTML

  1. <div class="slide-container slide-paused" ontouchstart="">
  2. </div>

CSS

  1.  .slide-paused:hover .slide-wrapper {
  2.    animation-play-state: paused;
  3.  }
  5.  .slide-paused:hover .slide-wrapper img:hover {
  6.    opacity: .8;
  7.    cursor: grabbing;
  8.  }
京都 横浜 良い街
京都 横浜 良い街
京都 横浜 良い街

スライドショーにボタンを付ける場合

ボタンを付けるには

本記事は最初は「スライドショーをCSSのみ（JavaScriptなし）で作る」でしたが、それなのに何故か「ボタン付き」の検索キーワードでも上位に表示されていて、それで見ていただいている方も多いようなので、いっそのことタイトルに「ボタン付き」と加えて解説することにしました。

クリックで動作させる場合の動作内容について、画面遷移とそうでないものとに分けた場合に、前者はa要素を用いればJavaScriptなしで動作するものの、後者は現状、JavaScriptを用いるしかありません。

addEventListener()のメソッドを用います。

対象要素.addEventListener( 種類, 関数, false )

のように記述するもので、種類のところを’click’とすれば、対象要素をクリックしたときの動作を決めることができます。

スライドショーを1枚ずつ動かすボタンを付ける場合、ここでご紹介したCSSでの実装方法だと、JavaScriptを用いたとしても難しいので、それであれば最初からJavaScriptで実装するということになります。そうなってくるとそもそも、JavaScriptのライブラリを使った方法が良いと思います。

ニーズがあるかは分かりませんが、スライドショーの動きの停止、再生は、ここでご紹介したCSSによる実装をベースに、JavaScriptで簡単に実装可能です。

京都 横浜 良い街
京都 横浜 良い街
京都 横浜 良い街

ソースコード

HTML

  1. <div class="slider-wrapper">
  2.    <div class="slide-container">
  3.       <div class="slide-wrapper">
  4.          <img class="slide" src="画像の場所" alt="京都">
  5.          <img class="slide" src="画像の場所" alt="横浜">
  6.          <img class="slide" src="画像の場所" alt="良い街">
  7.       </div>
  8.       <div class="slide-wrapper">
  9.          <img class="slide" src="画像の場所" alt="京都">
  10.          <img class="slide" src="画像の場所" alt="横浜">
  11.          <img class="slide" src="画像の場所" alt="良い街">
  12.       </div>
  13.       <div class="slide-wrapper">
  14.          <img class="slide" src="画像の場所" alt="京都">
  15.          <img class="slide" src="画像の場所" alt="横浜">
  16.          <img class="slide" src="画像の場所" alt="良い街">
  17.       </div>
  18.    </div>
  19.    <div class="btns-wrapper">
  20.       <button id="stopBtn" class="slider-btn">STOP</button>
  21.       <button id="startBtn" class="slider-btn">START</button>
  22.    </div>
  23. </div>

JavaScript

  1. const stopBtn = document.getElementById('stopBtn')
  2. const startBtn = document.getElementById('startBtn')
  3. const sliders = document.querySelectorAll('.slide-wrapper')
  5. stopBtn.addEventListener('click', function() {
  6.    sliders.forEach( function(slider){
  7.       slider.style.animation = 'none';
  8. });
  9. }, false);
  11. startBtn.addEventListener('click', function() {
  12.    sliders.forEach( function(slider){
  13.       slider.style.animation = 'slide-flow 20s infinite linear 1s both';
  14. });
  15. }, false);

まとめ

CSSだけでスライドショー作れちゃうよシリーズでした。
ライブラリを使った方が実装は早いというケースももちろんあるとは思いますが、基本的にはJavaScriptを使うよりCSSのみの方が処理速度が速いと思います。また、ライブラリだと何か思ったように動かないというときに、環境のバグなのかカスタマイズの仕方が悪いのかの特定が難しくなりますし、ちゃんと動きの理屈を理解したコードの方が思ったようにいきやすかったりすると思います。

SEOチェックシート
ダウンロード 無料相談
著者のイメージ画像

株式会社BringFlower
稲田 高洋（Takahiro Inada）

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010～2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月に独立後、2024年4月に株式会社BringFlowerを設立。SEOコンサルを活動の軸に据えつつ、AIライティングツールの開発と運営を自ら行う。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。

ノウハウ一覧
SEOに強いAIライティングツール「BringRitera」 SEOに強いAIライティングツール「BringRitera」