
こんにちは、ウェブデザインパレットのmisaです。
スライドショーは、Webサイト制作で欠かせないアニメーションのひとつです。
JavaScriptやslick、Swiperなどを使用して実装されているスライドショーが一般的かと思います。
ただ、Webサイト制作をはじめたばかりの方の中には「JavaScriptを使用するのはちょっとハードルが高い・・・」という方もいらっしゃるのではないでしょうか。
実は、JavaScriptを使用しなくても、HTMLとCSSだけでスライドショーは実装できるのです。
今回は、JavaScriptを使用せずにHTMLとCSSだけで実装できる、シンプルなスライドショーの作り方をご紹介します。
Contents
HTMLとCSSだけで実装するスライドショー



今回はこのようなスライドショーを実装してみます。
ソースコード
HTML
<div class="hero">
<div class="slideshow">
<div class="slide" style="background-image: url('slide_01.jpeg')"></div>
<div class="slide" style="background-image: url('slide_02.jpeg')"></div>
<div class="slide" style="background-image: url('slide_03.jpeg')"></div>
<div class="slide" style="background-image: url('slide_04.jpeg')"></div>
</div>
</div>
CSS
.hero {
position: relative;
height: 100vh;
overflow: hidden;
}
.slideshow {
position: absolute;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
opacity: 0;
animation: slideshow 24s linear infinite;
transform: scale(1);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}
/* スライドごとのディレイ設定 */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }
.slide:nth-child(4) { animation-delay: 18s; }
/* オーバーレイ効果 */
.slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
/* アニメーションの定義 */
@keyframes slideshow {
0% {
opacity: 0;
transform: scale(1.1);
}
4% {
opacity: 1;
}
25% {
opacity: 1;
transform: scale(1);
}
29% {
opacity: 0;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
アニメーションの仕組み
- タイミング設定
- 全体のアニメーションは24秒間で1周します
- 今回スライド数は4枚で、各スライドは6秒ずつ表示されます
- animation-delayプロパティで各スライドの開始タイミングをずらしています
- トランジション効果
- スライドは少し拡大された状態(scale(1.1))からスタートします
- 表示中に徐々に等倍(scale(1))にズームアウトします
- opacityでスライドの切り替えがスムーズに見えるようにしています
- レスポンシブ対応
- viewport heightを使用した100vhを指定しています
- background-size: coverにより、画面幅を問わず画像がフィットするようにしています
カスタマイズ方法



スライドの枚数を変更する場合は、アニメーションの時間配分も調整が必要です
- 表示時間の調整
animation
の秒数(24s)を変更- 各スライドの
animation-delay
を適宜調整
- エフェクトの変更
transform
の値を変更することで、ズーム以外の動きも可能@keyframes
内のタイミングを調整して、フェードの速度を変更
- オーバーレイの調整
.slide::before
のbackground-color
の透明度を変更
HTMLとCSSだけで実装するメリット
- JavaScriptを使用しないため、軽量
- コードがシンプルで理解しやすい
- ページの読み込み速度が速い
- ブラウザの互換性が高い
- カスタマイズが簡単
まとめ
今回は、JavaScriptを使用せずにHTMLとCSSだけで実装できる、シンプルなスライドショーの作り方について解説しました。
簡単に実装できるのでぜひみなさんもアレンジして、オリジナルのスライドショーを作ってみてくださいね。
あわせて読みたい




【コピペで使用OK!】おしゃれなスクロールダウンアニメーションのデザイン
こんにちは、ウェブデザインパレットのmisaです。 Webサイトのトップページで、「Scroll Down」のボタンを見たことはありますか? 「Scroll Down」のボタンはアニメーシ…
あわせて読みたい




【コピペで使用OK!】CSSで実装するおしゃれなファーストビューデザイン4選
こんにちは、ウェブデザインパレットのmisaです。 Webサイトの顔とも言えるファーストビュー。ヒーローセクションとも呼ばれます。 ユーザーの目を引くおしゃれなデザイ…
あわせて読みたい




【コピペで使用OK!】シンプルでおしゃれなCSSボタンデザイン(ホバーアニメーション付き)
こんにちは、ウェブデザインパレットのmisaです。 シンプルでおしゃれなボタンのデザインをまとめました。 どのボタンもHTMLとCSSのみで表示できます。ホバーアニメーシ…
では、また~✨