画像ギャラリーをモーダルウインドウで表示する方法【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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptと6枚の画像で構成されています。HTMLではギャラリーを開くボタン、モーダルウインドウ、6枚の画像、閉じるボタンを配置し、CSSではモーダル背景や画像ギャラリーのレイアウト、表示アニメーションを設定しています。JavaScriptでは「ギャラリーを開く」をクリックしたときにモーダルウインドウを表示し、「閉じる」をクリックすると非表示にします。

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は、ギャラリーを開く操作エリアとモーダルウインドウの内容を構成するファイルです。「モーダル画像ギャラリー」や「旅行フォトギャラリー」などの文章、ボタンの文字、表示する画像や画像の順番を変更できます。画像を追加する場合は、ギャラリー内へ同じ形式のimg要素を追加します。

style.cssは、操作エリア、モーダル背景、モーダル本体、画像ギャラリー、ボタンのデザインを設定するファイルです。モーダルの横幅や余白、背景色、角丸、影、画像同士の間隔、ギャラリーの列数などを変更できます。また、モーダル表示時の拡大アニメーションと画面幅に応じた列数の変更もこのファイルで設定しています。

script.jsは、モーダルウインドウの表示と非表示を切り替えるファイルです。「ギャラリーを開く」をクリックするとis-activeクラスを追加し、「閉じる」をクリックするとクラスを削除します。

imagesフォルダには、画像ギャラリーで使用する6枚の画像を配置します。image-01.jpgからimage-06.jpgまでが、それぞれindex.htmlのimg要素から読み込まれます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成してください。imagesフォルダにはimage-01.jpgからimage-06.jpgまでの6枚の画像を配置します。ファイル構成を保った状態でsample/index.htmlをブラウザで開くとサンプルを利用できます。

ページに表示される「ギャラリーを開く」ボタンをクリックすると、画面全体にモーダル背景が表示され、その中央に6枚の画像を並べたモーダルウインドウが開きます。モーダル内の「閉じる」ボタンをクリックすると、画像ギャラリーが非表示になります。

カスタマイズできる内容
index.htmlでは、操作エリアのタイトルと説明文、モーダルタイトル、ボタンの文字、画像ファイル、alt属性を変更できます。画像を差し替える場合はimagesフォルダ内の画像を変更するか、img要素のsrcを変更してください。同じ形式のimg要素を追加・削除することで、ギャラリーに表示する画像の枚数も変更できます。

style.cssでは、操作エリアとモーダル本体の横幅、余白、背景色、角丸、影、画像の比率、画像同士の間隔などを変更できます。grid-template-columnsを変更すると画像の列数を調整でき、background:rgba(15,23,42,.72);の最後の値を変更するとモーダル背景の濃さを調整できます。

数値調整
style.css
max-width:760px;
ギャラリーを開く操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がります。

border-radius:18px;
操作エリアの角丸です。値を大きくすると丸みが強くなります。

background:rgba(15,23,42,.72);
モーダル背景の色と透明度です。.72を大きくすると背景が濃くなり、小さくすると薄くなります。

max-width:920px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくすると狭くなります。

max-height:90vh;
モーダル本体の最大高さです。画面高さの90％以内に収め、高さを超えた内容は縦スクロールで表示されます。

padding:28px;
モーダル本体の内側余白です。値を大きくすると画像やタイトルとモーダル端との間隔が広がります。

border-radius:20px;
モーダル本体の角丸です。値を大きくすると丸みが強くなります。

gap:16px;
ギャラリー画像同士の間隔です。値を大きくすると画像同士の間隔が広がります。

aspect-ratio:3 / 2;
ギャラリー画像を表示する縦横比です。現在は横3：縦2の比率で表示されます。

animation:image-gallery-modal_show .3s ease forwards;
モーダルを表示するときのアニメーション時間です。0.3秒で表示され、値を大きくするとゆっくり、小さくすると速くなります。

transform:scale(.92);
表示アニメーション開始時のモーダルサイズです。92％の大きさから通常サイズまで拡大して表示されます。

レスポンシブ対応
このサンプルはレスポンシブ対応です。モーダル本体にwidth:100%とmax-width:920pxを指定しているため、画面幅に合わせて自動的に縮小されます。画像ギャラリーは通常3列で表示し、画面幅700px以下では2列、480px以下では1列へ変更されます。さらに480px以下では操作エリアとモーダル本体の内側余白も小さくなるため、スマートフォン・タブレット・PCで利用できます。