Webサイトにスライドショーを実装する方法はどのようなものがあるでしょうか。

他サイトで見かけることはあっても、自分で作るとなると難しそうで手が出しにくいですよね。

実は、JavaScriptなどのプログラミング言語を使わずに、HTMLとCSSのみで実装することもできます。

今回は、スライドショーを実装したいと考えている方のために、CSSで作成できるスライドショーのサンプルコードを紹介します。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

CSSを使ったスライドショー

Webサイトでスライドショーといえば、画像が切り替わるものがよくありますよね。

今回は画像を5つ用意して、1枚ずつ右から左にスライドしていく動きを作成します。

<div class="slide">
  <img src="img/sample1.png">
  <img src="img/sample2.png">
  <img src="img/sample3.png">
  <img src="img/sample4.png">
  <img src="img/sample5.png">
</div>

CSSでは以下のように記述します。

.slide {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  margin: auto;
  background: #fff;
}
.slide img {
  display: block;
  position: absolute;
  width: inherit;
  height: inherit;
  left: 100%;
  animation: slide-anime 15s ease infinite;
}
.slide img:nth-of-type(1) {animation-delay: 0s;}
.slide img:nth-of-type(2) {animation-delay: 3s;}
.slide img:nth-of-type(3) {animation-delay: 6s;}
.slide img:nth-of-type(4) {animation-delay: 9s;}
.slide img:nth-of-type(5) {animation-delay: 12s;}
 
@keyframes slide-anime{
  0% {left: 100%;}
  2% {left: 0;}
  18% {left: 0;}
  20% {left: -100%;}
  100% {left: -100%;}
}

animationプロパティの機能を利用して、1枚ずつスライドさせています。

「animation: slide-anime 15s ease infinite」の値はそれぞれ、アニメーションの名前、再生時間、再生速度の変化、ループ回数を指定しています。

名前はその後の「@keyframes」の部分で使用します。

「ease」は、アニメーションの開始と終了を滑らかにする指定です。

「infinite」を指定することで、アニメーションは無限に繰り返されます。

また、animation-delayは、アニメーションの開始時間を示します。

5枚の画像を時間をずらして動かすことで、1枚ずつスライドしているように表示されます。

再生時間やそれぞれのアニメーション開始時間を変えたりして、動きを試してみてください。

まとめ：スライドショーはCSSアニメーションで実装できる

今回は、CSSを使ってスライドショーを作成する方法を紹介しました。

5枚の画像のアニメーションの開始時間をずらして指定するのが重要でしたね。

オリジナルのスライドショーにも挑戦してみてください。

スライドショーを実装する上で、今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP