画像をモーダルウインドウに拡大表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

画像をモーダルウインドウに拡大表示する方法

HTML・CSS・JavaScriptを使って、画像をモーダルウインドウ内に拡大表示する方法を紹介します。このサンプルでは、サムネイル画像をクリックするとモーダルウインドウが開き、選択した画像を大きく表示できます。商品画像や作品紹介、フォトギャラリー、ポートフォリオなどで画像を見やすく表示したい場合に利用できます。

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

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

デモ

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

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

  <meta charset="UTF-8">

  <!-- ページタイトル -->
  <title>画像ギャラリーをモーダルで表示</title>

  <!-- CSS読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- ギャラリーエリア -->
  <div class="image-gallery-modal-window_wrap">

    <div class="image-gallery-modal-window_title">
      画像ギャラリー
    </div>

    <p class="image-gallery-modal-window_text">
      サムネイル画像をクリックすると、モーダル内に拡大表示します。
    </p>

    <div class="image-gallery-modal-window_gallery">

      <!-- 1枚目の画像 -->
      <button class="image-gallery-modal-window_thumb" type="button" data-modal-image="https://picsum.photos/seed/gal1/600/400">

        <img src="https://picsum.photos/seed/gal1/600/400" alt="森と湖（サンプル1）">

      </button>

      <!-- 2枚目の画像 -->
      <button class="image-gallery-modal-window_thumb" type="button" data-modal-image="https://picsum.photos/seed/gal2/600/400">

        <img src="https://picsum.photos/seed/gal2/600/400" alt="夕焼けの海（サンプル2）">

      </button>

      <!-- 3枚目の画像 -->
      <button class="image-gallery-modal-window_thumb" type="button" data-modal-image="https://picsum.photos/seed/gal3/600/400">

        <img src="https://picsum.photos/seed/gal3/600/400" alt="街並みの夜景（サンプル3）">

      </button>

    </div>

  </div>

  <!-- モーダル全体 -->
  <div class="image-gallery-modal-window_overlay" data-modal-overlay>

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

      <!-- 拡大画像表示エリア -->
      <img class="image-gallery-modal-window_large" src="" alt="拡大画像" data-modal-large-image>

      <!-- 閉じるボタン -->
      <button class="image-gallery-modal-window_close" type="button" data-modal-close>
        閉じる
      </button>

    </div>

  </div>

  <!-- JavaScript読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{

  margin:0;
  font-family:sans-serif;
  background:#ffffff;

}

/* ギャラリー全体 */
.image-gallery-modal-window_wrap{

  max-width:700px;
  margin:40px auto;
  padding:32px;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  text-align:center;

}

/* タイトル */
.image-gallery-modal-window_title{

  font-size:22px;
  font-weight:700;
  margin-bottom:12px;

}

/* 説明文 */
.image-gallery-modal-window_text{

  margin-bottom:24px;
  color:#4b5563;

}

/* サムネイルを並べるエリア */
.image-gallery-modal-window_gallery{

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;

}

/* サムネイルボタン */
.image-gallery-modal-window_thumb{

  width:100%;
  padding:0;
  border:none;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  background:none;

}

/* サムネイル画像 */
.image-gallery-modal-window_thumb img{

  display:block;
  width:100%;
  height:140px;
  object-fit:cover;

}

/* モーダル背景 */
.image-gallery-modal-window_overlay{

  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,0.75);
  align-items:center;
  justify-content:center;
  padding:20px;

}

/* モーダル表示時 */
.image-gallery-modal-window_overlay.is-active{

  display:flex;

}

/* モーダル本体 */
.image-gallery-modal-window_modal{

  width:100%;
  max-width:760px;
  padding:20px;
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);

}

/* 拡大画像 */
.image-gallery-modal-window_large{

  display:block;
  width:100%;
  max-height:70vh;
  object-fit:contain;
  border-radius:12px;

}

/* 閉じるボタン */
.image-gallery-modal-window_close{

  margin-top:16px;
  padding:10px 20px;
  border:none;
  border-radius:8px;
  background:#111827;
  color:#ffffff;
  font-weight:700;
  cursor:pointer;

}

// サムネイル画像ボタンをすべて取得
const modalImageButtons=document.querySelectorAll("[data-modal-image]");

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

// モーダル内の拡大画像を取得
const modalLargeImage=document.querySelector("[data-modal-large-image]");

// 閉じるボタンを取得
const modalClose=document.querySelector("[data-modal-close]");

// サムネイル画像をクリックしたときの処理
modalImageButtons.forEach(function(button){

  button.addEventListener("click",function(){

    // クリックした画像URLを取得
    const imageUrl=button.dataset.modalImage;

    // モーダル内の拡大画像にURLを設定
    modalLargeImage.src=imageUrl;

    // モーダルを表示
    modalOverlay.classList.add("is-active");

  });

});

// 閉じるボタンをクリックしたときの処理
modalClose.addEventListener("click",function(){

  // モーダルを非表示
  modalOverlay.classList.remove("is-active");

  // 拡大画像を空にする
  modalLargeImage.src="";

});

// 背景部分をクリックしたときの処理
modalOverlay.addEventListener("click",function(event){

  // モーダル本体ではなく背景をクリックした場合のみ閉じる
  if(event.target===modalOverlay){

    modalOverlay.classList.remove("is-active");
    modalLargeImage.src="";

  }

});

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。

sample/
├── index.html
├── style.css
└── script.js

index.html をブラウザで開くと、サムネイル画像をクリックした際にモーダルウインドウ内へ画像を拡大表示できます。表示する画像を変更したい場合は、HTML内の img タグや data-modal-image 属性の画像URLを変更してください。