Webページに動きを加えたいときに便利なのが「スライドショー」です。画像やコンテンツを自動で切り替えることで、見た目にインパクトを与えることができます。この記事では、HTML、CSS、そしてJavaScriptを使って、シンプルかつ実用的なスライドショーを作る方法を解説します。初心者の方にもわかりやすく、コピペで使えるコード付きで紹介しているので、ぜひ自分のWebサイトに取り入れてみてください。
HTMLでスライドショーの構造を作る
まずはスライドショーの骨組みとなるHTMLを作成します。今回は3枚の画像が順番に切り替わるスライドショーを想定します。
以下が基本的なHTML構造です。
<div class="slideshow-container">
<div class="slide fade">
<img src="image1.jpg" alt="画像1">
</div>
<div class="slide fade">
<img src="image2.jpg" alt="画像2">
</div>
<div class="slide fade">
<img src="image3.jpg" alt="画像3">
</div>
</div>
ポイントは.slide
というクラスで各スライドを定義し、全体を.slideshow-container
で囲っている点です。この構造がCSSとJavaScriptでの制御の基礎になります。
CSSでスタイルとアニメーションを設定する
次に、スライドショーを見た目よく表示するためのCSSを設定します。以下のように記述しましょう。
.slideshow-container {
position: relative;
width: 100%;
max-width: 600px;
margin: auto;
overflow: hidden;
}
.slide {
display: none;
position: absolute;
width: 100%;
}
.slide img {
width: 100%;
vertical-align: middle;
}
.fade {
animation-name: fade;
animation-duration: 1s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
ここでのポイントは.slide
クラスにdisplay: none
を設定し、JavaScriptで表示するスライドだけをdisplay: block
に切り替えるようにしている点です。fade
クラスでフェードインの効果も付け加えています。
JavaScriptでスライドの切り替え機能を実装する
いよいよJavaScriptでスライドを切り替える動きを追加します。以下が自動でスライドが切り替わるシンプルなコードです。
let slideIndex = 0;
function showSlides() {
let slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // 3秒ごとにスライドを切り替え
}
window.onload = showSlides;
このコードは、3秒ごとにスライドを順番に表示するというシンプルな処理です。window.onload
でページ読み込み後にスライドショーが開始されるようになっています。
ボタンを使って手動で操作できるスライドショーに改良する
自動だけでなく、「次へ」「前へ」ボタンを設置して手動でスライドを切り替える機能も追加できます。
HTMLにボタンを追加:
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
CSSを追加:
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 24px;
user-select: none;
background-color: rgba(0,0,0,0.5);
border-radius: 3px;
}
.prev {
left: 0;
}
.next {
right: 0;
}
JavaScriptを以下のように調整:
let slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n) {
showSlide(slideIndex += n);
}
function showSlide(n) {
let slides = document.getElementsByClassName("slide");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
このようにすることで、ユーザーが任意のタイミングでスライドを進めたり戻したりできるようになります。
よくあるエラーとその対処法
スライドが切り替わらない
- JavaScriptの
getElementsByClassName
の戻り値はHTMLCollectionなので、forEach
ではなく通常のforループを使いましょう。
画像が表示されない
img
のsrc
パスが間違っていることが多いです。相対パス・絶対パスの確認を。
スライドが重なって見える
.slide
にposition: absolute
を指定し忘れていないか確認してください。
まとめ
HTML、CSS、JavaScriptを使えば、初心者でも十分にスライドショーを実装できます。この記事では、自動切り替え・手動切り替えの両方に対応するシンプルなスライドショーの作り方を紹介しました。まずはこの基本形をコピーして試し、慣れてきたら、スライドにテキストを重ねたり、サムネイル付きにしたりと、カスタマイズを楽しんでみてください。