CSSでスライドショーを作成するには？簡単にカスタマイズできるサンプルコードを紹介
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枚の画像のアニメーションの開始時間をずらして指定するのが重要でしたね。
オリジナルのスライドショーにも挑戦してみてください。
スライドショーを実装する上で、今回の記事が参考になれば幸いです。
