HTMLでサムネイル画像切替ギャラリーを作りました。
iindexx.htmlと同じ階層に500×500pxの画像を収めたpicフォルダーを作成しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サムネイル画像切替ギャラリー</title>
<style>
body {
font-family: sans-serif;
margin: 0;
background: #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.gallery {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
padding: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.main-image {
width: 400px;
height: 400px;
object-fit: cover;
border: 1px solid #ccc;
}
.thumbnails {
display: flex;
flex-direction: column;
gap: 10px;
}
.thumbnails img {
width: 70px;
height: 70px;
object-fit: cover;
border: 2px solid transparent;
cursor: pointer;
transition: border 0.2s;
}
.thumbnails img:hover,
.thumbnails img.active {
border-color: #0078D7; /* 選択時の青枠 */
}
</style>
</head>
<body>
<div class="gallery">
<img id="mainImage" src="pic/pic01.jpg"
alt="Main" class="main-image">
<div class="thumbnails">
<img src="pic/pic01.jpg" alt="Image1"
class="active" onclick="changeImage(this)">
<img src="pic/pic02.jpg" alt="Image2"
onclick="changeImage(this)">
<img src="pic/pic03.jpg" alt="Image3"
onclick="changeImage(this)">
<img src="pic/pic04.jpg" alt="Image4"
onclick="changeImage(this)">
<img src="pic/pic05.jpg" alt="Image5"
onclick="changeImage(this)">
</div>
</div>
<script>
function changeImage(thumb) {
// メイン画像の切り替え
document.getElementById("mainImage").src = thumb.src;
// アクティブ枠の更新
document.querySelectorAll(".thumbnails img").
forEach(img => img.classList.remove("active"));
thumb.classList.add("active");
}
</script>
</body>
</html>
実行直後の画面。右端のサムネールをクリックすれば・・・
左に大きく表示されます。
クリック毎に切り替わります。
