【HTML/CSS】コピペOK！実用的なスライドショー３選

SHARE

Contents

HTML/CSSのみでスライドショーを作る方法

「webサイトのヘッダー部分にスライドショーを入れたい」「スライドショーを使ってなにか作りたい」と思っている方など、スライドショーでこういう制作がしたい！と考えている人は多いと思います。

それと同時に、「スライドショーは難しそう」「JQueryやJavaScriptの使い方がわからない」という方もいると思うので、この記事では、HTML・CSSのみでスライドショーをまとめました。

スライドショーの種類は色々ありますが、その中からよりWeb制作に実用的なものをまとめたので、ぜひ自分なりにカスタマイズして使って見てください。

基本的なスライドショー

実用的で基本的なスライドショーとして、フェードイン・フェードアウトするスライドショーになります。

ファースビューの背景などに使えるスライドショーになります。

See the Pen slide1 by 古澤 良汰 (@ryotarofu) on CodePen.

HTML

    <div class="slide">
        <img class="item1" src="/images/item1.jpg" alt="">
        <img class="item2" src="/images/item2.jpg" alt="">
        <img class="item3" src="/images/item3.jpg" alt="">
        <img class="item4" src="/images/item4.jpg" alt="">
    </div>

CSS

.slide {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
   
  @keyframes slideshow{
    0%{
      opacity: 0;
    }
    10%{
      opacity: 1;
    }
    28%{
      opacity: 1
    }
    38%{
      opacity: 0;
    }
    100%{
      opacity: 0;
    }
  }
   
  .slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    opacity: 0;
    animation :slideshow 20s linear infinite;
  }
   
  .slide img:nth-child(2){
    animation-delay: 8s;
  }
   
  .slide img:last-child{
    animation-delay: 16s;
  }

このスライドショーは３枚での設定になっているので、写真を４枚以上使用すると崩れてしまいます。

４枚以上スのライドショーをCSSで実装する場合には、キーフレームを使ったCSSアニメーションの知識が必要になってきます。

アクセントのあるスライドショー

上記の基本的なスライドショーに、範囲内での拡大・縮小を加えたスライドショー

overflowを使用することで、枠内からはみ出さずに画像が拡大・縮小します。

ファースビューの背景にアクセントを付けたいときや、フードメニューなど様々な場面で活躍する便利なスライドショーになっています。

See the Pen スライド２ by 古澤 良汰 (@ryotarofu) on CodePen.

HTML

    <div class="slide">
        <img class="item1" src="/images/item1.jpg" alt="">
        <img class="item2" src="/images/item2.jpg" alt="">
        <img class="item3" src="/images/item3.jpg" alt="">
        <img class="item4" src="/images/item4.jpg" alt="">
    </div>

CSS

.slide{
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
}
.item1, .item2, .item3 ,.item4{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.item1{
  animation: slide1 20s infinite;
}
.item2{
  animation: slide2 20s infinite;
}
.item3{
  animation: slide3 20s infinite;
}
.item4{
  animation: slide4 20s infinite;
}

@keyframes slide1 {
  0% {opacity: 1; transform: scale(1.0);}
  20% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.1);}
  90% {opacity: 0}
  100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide2 {
  0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  50% {opacity: 1;}
  60% {opacity: 0; transform: scale(1.0);}
  100% {opacity: 0;}
}

@keyframes slide3 {
  0% {opacity: 0;}
  50% {opacity: 0;  transform: scale(1.0);}
  60% {opacity: 1;}
  70% {opacity: 1;}
  90% {opacity: 0; transform: scale(1.1);}
  100% {opacity: 0;}
}

@keyframes slide4 {
  0% {opacity: 0;}
  70% {opacity: 0; transform: scale(1.1);}
  80% {opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0; transform: scale(1.0);}
}

ホバーができるスライドショー

写真をホーバーすると、スライドが止まり、写真が浮き上がるスライドショー。

インスタグラムの投稿や、写真にリンクを付けたいとこなどに有効になってきます。

See the Pen スライド３ by 古澤 良汰 (@ryotarofu) on CodePen.

HTML

 <div class="wrap slider" ontouchstart="">
        <div class="slide">
            <img class="item1 item" src="/images/item.jpg" alt="">
            <img class="item2 item" src="/images/item.jpg" alt="">
            <img class="item3 item" src="/images/item.jpg" alt="">
            <img class="item4 item" src="/images/item.jpg" alt="">
        </div>
        <div class="slide">
            <img class="item1 item" src="/images/item.jpg" alt="">
            <img class="item2 item" src="/images/item.jpg" alt="">
            <img class="item3 item" src="/images/item.jpg" alt="">
            <img class="item4 item" src="/images/item.jpg" alt="">
        </div>
        <div class="slide">
            <img class="item1 item" src="/images/item.jpg" alt="">
            <img class="item2 item" src="/images/item.jpg" alt="">
            <img class="item3 item" src="/images/item.jpg" alt="">
            <img class="item4 item" src="/images/item.jpg" alt="">
        </div>
    </div>

CSS


  img {
    width: 200px;
    height: 200px;
  }

  .wrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 340px;
    margin-bottom: 100px;
  }

  .slide {
    display: flex;
    -webkit-animation: slide 20s infinite linear 1s both;
    animation: slide 20s infinite linear 1s both;
  }

  @-webkit-keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
 
  .slider:hover .slide {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

  .item {
    transition: all 0.2s;
    margin-right: 20px;
  }

  .item:hover {
    transform: translateY(-20px);
    border-radius: 10px;
    box-shadow: 0 3px 10px 0 #333;
    opacity: 1;
    cursor: pointer;
  }

まとめ

今回はWeb制作で実用的なスライドショーについてまとめました。

上記でまとめたスライドショー以外にも、多種多様なスライドショーがまだまだあります。

自分の制作物に合うスライドショーを見つけて、制作の幅を増やしましょう。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事

【HTML・CSS】ポップアップウィンドウを作ろう！

次の記事

CSSで埋め込んだGoogleカレンダーのデザインを変更させる…