JavaScriptで作るシンプルな画像ギャラリー

本記事では、HTML/CSSで基本レイアウトを構築し、JavaScriptを活用して画像の動的な切り替えや拡大表示を実現する方法を解説します。
初心者でも分かりやすい具体的なコード例を通して、魅力的なギャラリーを作成しましょう！

1. HTMLの基本構造
2. CSSでのレイアウトとスタイル設定
3. JavaScriptで動的なコンテンツ生成
4. アクセシビリティとレスポンシブ対応
5. まとめ
6. 参考リンク

1. HTMLの基本構造

画像ギャラリーは、主に画像を表示する領域（ギャラリーボックス）で構成されます。
ここでは、<div id="galleryGrid">内に画像のアイテムを配置し、動的にコンテンツを生成します。


<div id="galleryGrid" class="gallery-grid">
  <!-- JavaScriptで画像アイテムが追加される -->
</div>

2. CSSでのレイアウトとスタイル設定

CSSを使って、画像ギャラリーのレイアウトをグリッド形式に設定し、各画像にホバー時の拡大効果を付与します。
また、モーダル表示用のスタイルも定義して、画像クリック時に拡大画像を表示する仕組みを構築します。


/* 画像ギャラリーのグリッドレイアウト */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

/* 画像アイテムのスタイル */
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.gallery-item img {
  width: 100%;
  display: block;
}
.gallery-item:hover {
  transform: scale(1.05);
}

/* モーダル表示 */
#modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#modal img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid #fff;
  border-radius: 5px;
}

3. JavaScriptで動的なコンテンツ生成

JavaScriptを使って、画像データの配列から動的に画像ギャラリーのアイテムを生成します。
また、各画像をクリックすると、モーダルで拡大表示する処理を実装します。


// 画像データのサンプル配列
const images = [
  "https://kamechannel.com/images/sample1.jpg",
  "https://kamechannel.com/images/sample2.jpg",
  "https://kamechannel.com/images/sample3.jpg",
  "https://kamechannel.com/images/sample4.jpg",
  "https://kamechannel.com/images/sample5.jpg"
];

// 画像ギャラリーを生成する関数
function loadGallery() {
  const galleryGrid = document.getElementById("galleryGrid");
  galleryGrid.innerHTML = ""; // 既存のコンテンツをクリア
  
  images.forEach(src => {
    const div = document.createElement("div");
    div.classList.add("gallery-item");
    const img = document.createElement("img");
    img.src = src;
    img.alt = "ギャラリー画像";
    
    // 画像クリックでモーダル表示
    img.addEventListener("click", function() {
      const modal = document.getElementById("modal");
      const modalImg = document.getElementById("modalImg");
      modalImg.src = src;
      modal.style.display = "flex";
    });
    
    div.appendChild(img);
    galleryGrid.appendChild(div);
  });
}

// モーダルをクリックで閉じる
document.getElementById("modal").addEventListener("click", function() {
  this.style.display = "none";
});

// 「ギャラリーを読み込む」ボタンのイベント
document.getElementById("loadGalleryBtn").addEventListener("click", loadGallery);

4. アクセシビリティとレスポンシブ対応

– アクセシビリティ：各画像にはalt属性を設定し、スクリーンリーダーでの利用に配慮しています。
– レスポンシブ対応：CSSグリッドレイアウトとメディアクエリを使用して、様々な画面サイズに対応したレイアウトを実現しています。

5. まとめ

本記事では、HTML/CSSとJavaScriptを活用して、シンプルな画像ギャラリーを作成する方法を解説しました。
基本のHTML構造、CSSによるグリッドレイアウトとホバー効果、そしてJavaScriptでの動的な画像生成とモーダル表示を学ぶことで、初心者でも実践的なWebギャラリーが作成できます。
さらに、アクセシビリティとレスポンシブデザインにも配慮しているため、様々なデバイスで快適に利用できる仕組みになっています。
この基本をマスターしたら、自分なりのカスタマイズや新たな機能追加にチャレンジして、より魅力的なギャラリーを作成しましょう！