【コピペ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以下に対応していない点に注意しましょう。


アプリケーションWEBサービス作成に興味のある方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

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が苦手な方にもおすすめなスライドショーの作り方です。

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


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

生活スタイルに合わせて選べる3コース

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5