HTML・CSS・JavaScriptで作る！ライトボックス付き画像ギャラリーの完全ガイド

Webサイトにおいて「画像ギャラリー」は訪問者の注目を集める重要なコンテンツの一つです。特に「ライトボックス」付きのギャラリーは、クリックした画像を画面いっぱいに拡大表示でき、見やすく美しい演出を提供できます。この記事では、HTML・CSS・JavaScriptを使って、シンプルかつ実用的なライトボックス付き画像ギャラリーをゼロから作成する方法をわかりやすく解説します。初心者でもコピペですぐに使えるコード付きで紹介しますので、ぜひ最後までお読みください。

HTMLで画像ギャラリーの基本構造を作成

まずは画像を表示するためのHTML構造を準備します。以下のようなマークアップが基本となります。

<div class="gallery">
  <img src="images/photo1.jpg" alt="画像1" class="thumbnail" />
  <img src="images/photo2.jpg" alt="画像2" class="thumbnail" />
  <img src="images/photo3.jpg" alt="画像3" class="thumbnail" />
</div>

<div id="lightbox" class="lightbox">
  <span class="close">&times;</span>
  <img class="lightbox-content" id="lightbox-img">
</div>

このHTMLでは、.galleryクラス内に複数のサムネイル画像を配置しています。ライトボックスは非表示状態で待機しており、クリック時に表示されるようにします。

CSSでレイアウトとライトボックスのスタイルを整える

次にCSSでスタイルを定義します。ギャラリーの見た目と、ライトボックスの背景、中央表示を実装します。

.gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.thumbnail {
  width: 200px;
  height: auto;
  cursor: pointer;
  border: 2px solid #ccc;
  transition: transform 0.3s;
}

.thumbnail:hover {
  transform: scale(1.05);
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

このスタイルにより、ギャラリー画像は整列し、ライトボックスは画面中央に拡大画像を表示できるようになります。

JavaScriptでライトボックスを制御する機能を追加

最後にJavaScriptを使って、クリックした画像をライトボックスで表示し、閉じる処理も加えます。

document.addEventListener('DOMContentLoaded', function () {
  const thumbnails = document.querySelectorAll('.thumbnail');
  const lightbox = document.getElementById('lightbox');
  const lightboxImg = document.getElementById('lightbox-img');
  const closeBtn = document.querySelector('.close');

  thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener('click', function () {
      lightbox.style.display = 'block';
      lightboxImg.src = this.src;
    });
  });

  closeBtn.addEventListener('click', function () {
    lightbox.style.display = 'none';
  });

  lightbox.addEventListener('click', function (e) {
    if (e.target === lightbox) {
      lightbox.style.display = 'none';
    }
  });
});

このスクリプトで、サムネイル画像をクリックすると、ライトボックスに拡大表示され、×ボタンや背景をクリックすると閉じられるようになります。

応用：レスポンシブ対応でスマホでも見やすくする

スマートフォンでも快適に見えるように、CSSにメディアクエリを追加します。

@media screen and (max-width: 600px) {
  .thumbnail {
    width: 100%;
  }
}

これにより、スマホでは画像が横幅いっぱいに表示され、操作性も向上します。

よくあるエラーと対処法

1. ライトボックスが表示されない
→ id や class の名前が一致しているか確認してください。特に lightbox-img などはJavaScriptと一致していないと機能しません。

2. サムネイル画像が並ばない
→ .gallery に display: flex が設定されているかチェックしましょう。

3. 背景をクリックしても閉じない
→ JavaScriptで e.target === lightbox を確認している部分が重要です。HTMLの構造が異なると正しく動作しません。

まとめ：自作ライトボックスギャラリーでサイトを魅力的に！

画像ギャラリーにライトボックスを取り入れることで、見た目にも機能的にもプロフェッショナルな印象のサイトを作ることができます。今回紹介したHTML・CSS・JavaScriptを組み合わせる方法は、ライブラリ不要で軽量かつカスタマイズ性が高いため、ポートフォリオや商品ギャラリーにもぴったりです。まずはこの記事のコードを試しながら、自分なりにアレンジしてみてください。きっとWeb制作の幅が広がるはずです。

タイトルとURLをコピーしました