【コピペOK】HTMLとCSSだけでホームページにスライドショーを作る方法を解説

2021.09.10
html スライドショー

「htmlにスライドショーを実装する方法ってどうやるんだろう?」

このような悩みを抱えている方もいるのではないでしょうか。

スライドショーの実装といえば、jQueryの利用が定番ですが、実はHTMLとCSSだけでも作ることができます。

今回、WEBCAMP MEDIAは、HTMLとCSSだけでスライドショーを作る方法について解説していきます!

  • HTMLとCSSで作るメリット
  • HTMLとCSSでスライドショーを作る方法

以上の項目に沿って説明します。

この記事を読むと、HTMLとCSSを使ってスライドショーを作る方法について理解できるのでぜひチェックしてみてください!

HTMLとCSSだけでスライドショーを作るメリット

サイトに掲載する内容によっては、スライドショーの動きやスピードを変えたいときもあるでしょう。そのようなときにJavaScriptの知識がなくてもCSSさえ触れれば実装できます。

また、CSSだけでスライドショーを作ると、読み込むファイルや記述するコードが少なくスムーズに動作します。

注意
IE9以下に対応していない点に注意しましょう。


未経験でも確実にプログラミングスキルを身につけられる!
【DMM WEBCAMP】では、専属コーチが卒業まで伴走します!
短期間効率的にプログラミングスキルを身につけたい
✔プログラミングを独学で進めていくのが不安
✔家での時間を有効に使ってスキルアップがしたい
といった方におすすめです!

実践的なスキルが身に付くカリキュラム

HTMLで作ったサイトにCSSでスライドショーを作る方法

HTMLとCSSを使ってスライドショーを作る方法を、サンプルコードを用いて解説します。

サンプルコード

HTML
<div class="slider">
        <div class="slider-inner">
            <div class="slider-item"><img src="test1.png"></div>
            <div class="slider-item"><img src="test2.png"></div>
            <div class="slider-item"><img src="test3.png"></div>
        </div>
    </div>
CSS
.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;

}
.slider-item {
  width: 300px;
  float: left;
}
img{
  width:100%;
}
.slider-inner {
  width: 300%;
  animation: slider 10s infinite ease;
}

@keyframes slider {
	0% {
	transform: translateX(0);
	}
	33% {
	transform: translateX(-300px);
	}
	66% {
	transform: translateX(-600px);
	}
	100% {
	transform: translateX(0);
	}
}

sliderクラスは、スライドショーに表示したい画面サイズを設定しましょう。overflow:hidden;を指定することで、指定した縦横幅以外の要素を非表示にしています。

slider-innerクラスにしているanimationプロパティは、スライドショーの表示時間や秒数、動きを設定できます。

上記画像の各変数ごとの解説は下記になります。

  1. slider:@keyframesの名前を入力
  2. 10s:アニメーションの開始から終了までを10秒で実行する
  3. infinite:アニメーションを永遠に繰り返すという意味
  4. ease:アニメーションの中央まで徐々にスピードが速くなり、後半にかけて遅くなる

@keyframesの0%から100%という値は、animationプロパティに指定した秒数を100で割った数値です。

サンプルコードだと、10秒を100%とするので、33%は3.3秒になり、0秒から3.3秒の間に画像を-300px動かすという仕組みになります。

このように、秒数をスライドショーに使う画像の枚数で割ることで、均等にスライドされます。

HTMLとCSSで動作の軽いスライドショーを作ろう

今回、WEBCAMP MEDIAでは、HTMLとCSSだけでスライドショーを作る方法について解説しましたが、いかがでしたでしょうか?

HTMLとCSSだけでスライドショーを作ることで、動作が軽くなったりJavaScriptの知識がなくても実装できます。

また、サイトが重く感じる方や、JavaScriptが苦手な方にもおすすめなスライドショーの作り方です。

ぜひ参考にしてみてくださいね!


【DMM WEBCAMP】は受講生の97%が未経験からのスタート!
充実のサポート体制で、プログラミングスキルを確実に身につけられます!
✔一人ひとりに合わせた学習計画で進められるため、仕事や学校と両立できる
✔未経験者のために開発された実践的なカリキュラムを用意
✔︎専属コーチが卒業まで学習をサポート

目的別で選べる3つのコース

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2022 WEBCAMP MEDIA Powered by AFFINGER5