画像ギャラリーをモーダルウインドウで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

画像ギャラリーをモーダルウインドウで表示する方法

画像ギャラリーをモーダルウインドウで表示する方法を紹介します。複数のサムネイル画像を一覧表示し、見たい画像をクリックすると、選択した画像をモーダルウインドウ内へ拡大表示できるサンプルです。HTML・CSS・JavaScriptだけで実装しているため、外部ライブラリを使わずに導入できます。

JavaScriptでは、クリックしたサムネイル画像のURLと代替テキストを取得し、モーダル内の拡大画像へ反映します。ひとつのモーダルを複数の画像で共有する構成なので、画像ごとにモーダルを用意する必要はありません。作品ギャラリー、商品写真、施工事例、プロフィール写真、イベント写真など、複数画像をまとめて見せたい場面に利用できます。

ギャラリーの画像はHTMLから追加・差し替えでき、列数、画像サイズ、余白、角丸、影、背景の濃さ、表示アニメーション時間はCSSで調整できます。画面幅に応じて画像が自動的に並び替わるため、スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応の画像ギャラリーです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ボタンを押すとモーダルウインドウ内に画像ギャラリーが表示されます。
※ デモでは https://picsum.photos のサンプル画像を使用しています。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>画像ギャラリーをモーダルウインドウで表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ギャラリーを開く操作エリア -->
  <div class="image-gallery-modal_wrap">

    <!-- タイトル -->
    <h1 class="image-gallery-modal_title">
      モーダル画像ギャラリー
    </h1>

    <!-- 説明文 -->
    <p class="image-gallery-modal_text">
      ボタンを押すとモーダルウインドウ内に画像ギャラリーを表示します。
    </p>

    <!-- ギャラリーを開くボタン -->
    <button
      class="image-gallery-modal_open"
      type="button"
      data-image-gallery-modal-open>
      ギャラリーを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="image-gallery-modal_overlay"
    data-image-gallery-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="image-gallery-modal_modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="image-gallery-modal-title">

      <!-- モーダルタイトル -->
      <div
        class="image-gallery-modal_modal-title"
        id="image-gallery-modal-title">
        旅行フォトギャラリー
      </div>

      <!--
        画像ギャラリー
        imagesフォルダ内の画像を差し替えると表示内容を変更できる
        画像を追加する場合は同じ形式のimg要素を追加する
      -->
      <div class="image-gallery-modal_grid">

        <!-- ギャラリー画像1 -->
        <img
          src="images/image-01.jpg"
          alt="ギャラリー画像1">

        <!-- ギャラリー画像2 -->
        <img
          src="images/image-02.jpg"
          alt="ギャラリー画像2">

        <!-- ギャラリー画像3 -->
        <img
          src="images/image-03.jpg"
          alt="ギャラリー画像3">

        <!-- ギャラリー画像4 -->
        <img
          src="images/image-04.jpg"
          alt="ギャラリー画像4">

        <!-- ギャラリー画像5 -->
        <img
          src="images/image-05.jpg"
          alt="ギャラリー画像5">

        <!-- ギャラリー画像6 -->
        <img
          src="images/image-06.jpg"
          alt="ギャラリー画像6">

      </div>

      <!-- モーダルを閉じるボタン -->
      <button
        class="image-gallery-modal_close"
        type="button"
        data-image-gallery-modal-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ背景色 */
  font-family:sans-serif; /* 文字フォント */
}

/* ギャラリーを開く操作エリア */
.image-gallery-modal_wrap{
  max-width:760px; /* 最大横幅：値を大きくすると表示エリアが広がる */
  margin:40px auto; /* 上下余白・左右中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸：値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 背景色 */
  text-align:center; /* 文字とボタンを中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* タイトル */
.image-gallery-modal_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
}

/* 説明文 */
.image-gallery-modal_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  line-height:1.8; /* 行間：値を大きくすると行間が広がる */
}

/* ギャラリーを開くボタン */
.image-gallery-modal_open{
  padding:12px 26px; /* ボタン内側の余白 */
  border:none; /* 枠線なし */
  border-radius:10px; /* 角丸 */
  background:#2563eb; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
  cursor:pointer; /* マウスカーソルを指型にする */
}

/* モーダル背景 */
.image-gallery-modal_overlay{
  display:none; /* 初期状態は非表示 */
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 最前面へ表示 */
  align-items:center; /* モーダルを縦中央へ配置 */
  justify-content:center; /* モーダルを横中央へ配置 */
  padding:20px; /* 画面端との余白 */
  background:rgba(15,23,42,.72); /* 背景色：最後の値を大きくすると濃くなる */
  box-sizing:border-box; /* paddingを横幅に含める */
}

/* モーダル表示状態 */
.image-gallery-modal_overlay.is-active{
  display:flex; /* モーダル背景を表示 */
}

/* モーダル本体 */
.image-gallery-modal_modal{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:920px; /* 最大横幅：値を変更するとモーダル幅が変わる */
  max-height:90vh; /* 画面高さの90%以内に収める */
  overflow-y:auto; /* 高さを超えた場合は縦スクロール */
  padding:28px; /* 内側余白 */
  border-radius:20px; /* 角丸 */
  background:#ffffff; /* 背景色 */
  box-shadow:0 24px 60px rgba(0,0,0,.28); /* モーダルの影 */
  box-sizing:border-box; /* paddingを横幅に含める */
  animation:image-gallery-modal_show .3s ease forwards; /* 0.3秒で表示：値を大きくするとゆっくりになる */
}

/* モーダルタイトル */
.image-gallery-modal_modal-title{
  margin:0 0 20px; /* 下余白 */
  font-size:24px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
  text-align:center; /* 中央揃え */
}

/* 画像ギャラリー */
.image-gallery-modal_grid{
  display:grid; /* グリッドレイアウト */
  grid-template-columns:repeat(3,minmax(0,1fr)); /* PCでは3列表示 */
  gap:16px; /* 画像同士の間隔 */
  margin-bottom:24px; /* 閉じるボタンとの余白 */
}

/* ギャラリー画像 */
.image-gallery-modal_grid img{
  display:block; /* 画像下の不要な余白をなくす */
  width:100%; /* 列幅いっぱいに表示 */
  aspect-ratio:3 / 2; /* 横3：縦2の比率 */
  object-fit:cover; /* 枠内を埋めるようにトリミング */
  border-radius:12px; /* 画像の角丸 */
}

/* モーダルを閉じるボタン */
.image-gallery-modal_close{
  display:block; /* 中央配置できるようにする */
  margin:0 auto; /* 左右中央配置 */
  padding:12px 26px; /* ボタン内側の余白 */
  border:none; /* 枠線なし */
  border-radius:10px; /* 角丸 */
  background:#111827; /* 背景色 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
  cursor:pointer; /* マウスカーソルを指型にする */
}

/* モーダル表示アニメーション */
@keyframes image-gallery-modal_show{

  from{
    opacity:0; /* 透明な状態から開始 */
    transform:scale(.92); /* 92%のサイズから開始 */
  }

  to{
    opacity:1; /* 完全に表示 */
    transform:scale(1); /* 通常サイズへ拡大 */
  }

}

/* 画面幅700px以下 */
@media (max-width:700px){

  /* 画像ギャラリー */
  .image-gallery-modal_grid{
    grid-template-columns:repeat(2,minmax(0,1fr)); /* タブレットでは2列表示 */
  }

}

/* 画面幅480px以下 */
@media (max-width:480px){

  /* ギャラリーを開く操作エリア */
  .image-gallery-modal_wrap{
    padding:24px 18px; /* スマートフォン用の内側余白 */
  }

  /* モーダル本体 */
  .image-gallery-modal_modal{
    padding:22px 18px; /* スマートフォン用の内側余白 */
  }

  /* 画像ギャラリー */
  .image-gallery-modal_grid{
    grid-template-columns:1fr; /* スマートフォンでは1列表示 */
  }

}

// ギャラリーを開くボタンを取得
const imageGalleryModalOpen=document.querySelector(
  "[data-image-gallery-modal-open]"
);

// モーダル背景を取得
const imageGalleryModalOverlay=document.querySelector(
  "[data-image-gallery-modal-overlay]"
);

// モーダルを閉じるボタンを取得
const imageGalleryModalClose=document.querySelector(
  "[data-image-gallery-modal-close]"
);

// ギャラリーを開くボタンをクリックした時
imageGalleryModalOpen.addEventListener("click",function(){

  // モーダル背景へ表示用クラスを追加
  imageGalleryModalOverlay.classList.add("is-active");

});

// 閉じるボタンをクリックした時
imageGalleryModalClose.addEventListener("click",function(){

  // モーダル背景から表示用クラスを削除
  imageGalleryModalOverlay.classList.remove("is-active");

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、ギャラリーに表示する画像ファイルで構成されています。HTMLでモーダルウインドウと画像ギャラリーの構造を作成し、CSSでモーダルのデザイン、画像の並び方、表示アニメーション、レスポンシブ表示を設定します。JavaScriptでは「ギャラリーを開く」ボタンと「閉じる」ボタンの操作に合わせて、モーダルの表示・非表示を切り替えます。

配布用コードには画像ファイルは含まれていません。利用する画像は各自で6枚用意し、指定されたファイル名でsample/images/フォルダへ配置してください。画像を配置していない状態ではギャラリー画像が表示されないため、index.htmlを開く前に必ず画像ファイルを準備してください。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── image-01.jpg
    ├── image-02.jpg
    ├── image-03.jpg
    ├── image-04.jpg
    ├── image-05.jpg
    └── image-06.jpg

各ファイルの役割
・index.html：ギャラリーを開く操作エリア、モーダルウインドウ、モーダルタイトル、6枚のギャラリー画像、閉じるボタンを記述します。画像の追加・削除・表示順の変更は、このファイル内のimg要素を編集します。
・style.css：ページ全体、操作エリア、モーダル背景、モーダル本体、画像の3列・2列・1列表示、余白、角丸、影、表示アニメーションを設定します。
・script.js：「ギャラリーを開く」ボタンをクリックしたときにモーダルを表示し、「閉じる」ボタンをクリックしたときに非表示へ戻します。
・images/image-01.jpg〜image-06.jpg：モーダル内の画像ギャラリーへ表示する画像です。これらの画像は配布用コードに含まれていないため、各自で用意してください。

設置方法・使い方
① sampleフォルダを作成し、index.html・style.css・script.jsを配置します。
② sampleフォルダ内へimagesフォルダを作成します。
③ 利用する画像を各自で6枚用意し、image-01.jpg〜image-06.jpgへファイル名を変更します。
④ 6枚の画像をsample/images/へ配置します。
⑤ sample/index.htmlをブラウザで開きます。
⑥ 「ギャラリーを開く」をクリックすると、モーダルウインドウ内に6枚の画像が表示されます。
⑦ 「閉じる」をクリックするとモーダルが閉じます。

カスタマイズできる内容
・表示画像を変更する場合は、sample/images/内のimage-01.jpg〜image-06.jpgを別の画像へ差し替えます。
・画像を追加する場合は、画像ファイルをimagesフォルダへ配置し、index.htmlのimage-gallery-modal_grid内へ同じ形式のimg要素を追加します。
・画像を削除する場合は、index.htmlから不要なimg要素を削除します。
・画像の表示順は、index.html内のimg要素の並び順を変更すると調整できます。
・モーダルタイトルや説明文、ボタンの文字はindex.htmlで変更できます。
・モーダルの横幅、背景色、余白、角丸、影、画像間の余白、列数、ボタンの色はstyle.cssで変更できます。

数値調整
・style.cssの「animation:image-gallery-modal_show .3s ease forwards;」の「.3s」は0.3秒を表します。値を大きくするとモーダルがゆっくり表示され、小さくすると素早く表示されます。
・style.cssの「grid-template-columns:repeat(3,minmax(0,1fr));」の「3」はPC表示時の列数です。値を変更すると1行に並ぶ画像数が変わります。
・style.cssの「gap:16px;」の「16px」は画像同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
・style.cssの「max-width:920px;」を変更するとモーダル本体の最大横幅が変わります。
・style.cssの「max-height:90vh;」を変更するとモーダル本体の最大高さが変わります。

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。通常は画像を3列で表示し、画面幅700px以下では2列、480px以下では1列へ切り替えます。モーダル本体には「width:100%;」「max-width:920px;」「max-height:90vh;」「overflow-y:auto;」を設定しているため、スマートフォン・タブレット・PCの画面幅や高さに合わせてサイズが調整され、画像数が多い場合はモーダル内を縦スクロールできます。