Webサイトやブログを見ていると、商品画像や作品の紹介で「サムネイルをクリックすると上部の大きな画像が切り替わる」ギャラリー形式をよく見かけますよね。
今回は、上にメイン画像、下にサムネイル画像を4枚配置し、クリックしたサムネイル画像を上部の大きな画像として表示するシンプルな仕組みをHTML・CSS・JavaScriptで実装してみました。
ちょっとしたJavaScriptの知識があれば簡単に再現できますので、初心者の方でも安心して取り組めます。コードもすべて掲載していますので、コピーしてすぐに試すことも可能です！
こんな方におすすめ
商品画像やギャラリーを自作したい方
JavaScriptの基本的な使い方を学びたい方
画像切り替えUIをHTML＋CSS＋JSで作りたい方
完成イメージ
上部に1枚のメイン画像が表示され、その下に4枚の小さなサムネイル画像が並びます。
サムネイルをクリックすると、上部のメイン画像が切り替わるというシンプルな構造です。
HTMLコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <section> <div class="images-wrap"> <div class="main-img"><img src="imgs/img-1.JPG"></div> <ul class="sub-imgs"> <li><img src="imgs/img-1.JPG"></li> <li><img src="imgs/img-2.JPG"></li> <li><img src="imgs/img-3.JPG"></li> <li><img src="imgs/img-4.JPG"></li> </ul> </div> </section> </main> <script src="main.js"></script> </body> </html> |
CSSコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
@charset "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } section { width: calc(100% - 100px); max-width: 1500px; margin: 50px auto; } .images-wrap { max-width: 1000px; margin: 0 auto; height: 90vh; display: grid; grid-template-rows: 9fr 1fr; /* display: flex; flex-direction: column; */ overflow: hidden; } .main-img { width: 100%; /* height: 75%; */ height: 100%; overflow: hidden; } .main-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: bottom; opacity: 1; transition: opacity 0.5s ease; } .main-img.fade-out { opacity: 0; } .sub-imgs { display: flex; width: 100%; /* height: 25%; */ height: 100%; } .sub-imgs li { flex: 1; list-style-type: none; } .main-img img, .sub-imgs img { width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: bottom; } .sub-imgs img { border: 2px solid transparent; cursor: pointer; transition: border-color 0.3s; } .sub-imgs img.active { border-color: #fe0404; filter: blur(2px); } |
JavaScriptコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const imgtages = document.querySelectorAll('li img'); const mainImg = document.querySelector('.main-img img'); imgtages.forEach((img) => { img.addEventListener('click', (e) => { const targetSrc = e.currentTarget.getAttribute('src'); mainImg.classList.add('fade-out'); setTimeout(() => { mainImg.setAttribute('src', targetSrc); mainImg.classList.remove('fade-out'); }, 100); imgtages.forEach(img => img.classList.remove('active')); e.currentTarget.classList.add('active'); }); }); |
サーバー構築も検討中ならエックスサーバーがおすすめ！
今回のようなWeb制作を本格的に始めるなら、WordPressの設置や独自ドメインでの公開がすぐにできるレンタルサーバーの利用がおすすめです。
中でも 国内シェアNo.1の「エックスサーバー」 は以下の理由で特に人気です：
超高速＆安定した稼働率
初心者でも簡単にWordPressがインストールできる
無料独自SSLや自動バックアップなど安心機能が充実
今なら ドメイン永久無料＆初期費用0円キャンペーン 実施中！
👉 今すぐチェック：エックスサーバー公式サイト
コメント