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

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

画像をモーダルウインドウに拡大表示する方法を紹介します。このサンプルでは、サムネイル画像をクリックするとモーダルウインドウが表示され、画像を大きなサイズで確認できます。閉じるボタンをクリックするとモーダルが閉じるシンプルな構成になっており、HTML・CSS・JavaScriptだけで実装できます。

商品画像の拡大表示、作品ギャラリー、写真一覧、プロフィール画像の確認、お問い合わせ画面や管理画面など、画像を詳しく見せたいWebサイトで利用できます。画像を別ページへ移動させることなく閲覧できるため、操作性やユーザー体験の向上にも役立ちます。

掲載しているコードは画像ファイルを差し替えるだけで利用でき、モーダルサイズや背景色、余白、アニメーション速度なども簡単に変更できます。スマートフォン・タブレット・PCでもレイアウトが崩れにくいレスポンシブ対応のサンプルなので、そのまま実際のWebサイトへ導入しやすい構成です。

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

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

デモ

画像モーダル

下の画像をクリックするとモーダルウインドウで拡大表示されます。

画像をクリックするとモーダルウインドウで拡大表示されます。
※ デモでは https://picsum.photos のサンプル画像を使用しています。配布用コードには画像ファイルは含まれていませんので、お手持ちの画像を images/image.jpg として配置してください。

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

<!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-modal_wrap">

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

    <!-- 説明文 -->
    <p class="image-modal_text">
      画像をクリックするとモーダルウインドウで拡大表示します。
    </p>

    <!--
      サムネイル画像
      images/image.jpg をお手持ちの画像へ差し替えると表示する画像を変更できる
      この画像をクリックするとモーダルウインドウが開く
    -->
    <img
      src="images/image.jpg"
      alt="サンプル画像"
      class="image-modal_thumb"
      data-image-modal-open>

  </div>

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

    <!-- モーダル本体 -->
    <div class="image-modal_box">

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

      <!--
        拡大画像
        images/image.jpg をお手持ちの画像へ差し替えるとモーダル内へ表示する画像を変更できる
        サムネイル画像と同じ画像を指定するとクリック前後で自然な拡大表示になる
      -->
      <img
        src="images/image.jpg"
        alt="拡大画像">

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* 外側余白 */
  padding:40px 20px; /* 内側余白 */
  background:#ffffff; /* 背景色 */
  font-family:sans-serif; /* フォント */
}

/* コンテンツ */
.image-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;
}

/* タイトル */
.image-modal_title{
  margin:0 0 12px;
  font-size:22px;
  font-weight:700;
}

/* 説明文 */
.image-modal_text{
  margin:0 0 24px;
  color:#4b5563;
  line-height:1.8;
}

/* サムネイル画像 */
.image-modal_thumb{
  display:block;
  width:100%; /* 横幅 */
  max-width:280px; /* 最大幅 */
  margin:0 auto;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .25s; /* ホバー速度 */
}

.image-modal_thumb:hover{
  transform:scale(1.03);
}

/* モーダル背景 */
.image-modal_overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.75);
}

/* 表示 */
.image-modal_overlay.is-active{
  display:flex;
}

/* モーダル本体 */
.image-modal_box{
  position:relative;
  animation:image-modal-show .3s ease; /* 表示速度：値を大きくするとゆっくり表示 */
}

/* 拡大画像 */
.image-modal_box img{
  display:block;
  width:100%;
  max-width:900px; /* 最大幅 */
  max-height:85vh; /* 最大高さ */
  border-radius:18px;
  background:#ffffff;
  box-shadow:0 24px 48px rgba(0,0,0,.25);
}

/* 閉じるボタン */
.image-modal_close{
  position:absolute;
  top:-14px;
  right:-14px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#111827;
  color:#ffffff;
  font-size:22px;
  cursor:pointer;
}

/* 表示アニメーション */
@keyframes image-modal-show{

  from{
    opacity:0;
    transform:scale(.92); /* 開始サイズ */
  }

  to{
    opacity:1;
    transform:scale(1);
  }

}

/* スマートフォン */
@media (max-width:640px){

  .image-modal_wrap{
    padding:24px 18px;
  }

}

// サムネイル画像
const imageModalOpen=document.querySelector("[data-image-modal-open]");

// モーダル背景
const imageModalOverlay=document.querySelector("[data-image-modal-overlay]");

// 閉じるボタン
const imageModalClose=document.querySelector("[data-image-modal-close]");

// 画像クリック
imageModalOpen.addEventListener("click",function(){

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

});

// 閉じるボタン
imageModalClose.addEventListener("click",function(){

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

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLに画面構成、CSSにデザイン、JavaScriptにモーダルの開閉処理を分けているため、それぞれの役割が分かりやすく、初心者でも編集しやすい構成です。画像ファイルは配布していないため、お手持ちの画像を用意して配置してください。

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

各ファイルの役割
index.html は画面のレイアウトとモーダルの構造を定義しています。style.css は画像サイズやモーダルデザイン、背景、アニメーションなどの見た目を管理します。script.js は画像クリック時のモーダル表示と閉じるボタンの処理を担当します。images/image.jpg は表示・拡大する画像です。配布用コードには画像は含まれていないため、お手持ちの画像を配置してください。

設置方法・使い方
sample フォルダへ各ファイルを配置し、お手持ちの画像を sample/images/image.jpg として保存してください。その後、sample/index.html をブラウザで開くと動作を確認できます。画像をクリックするとモーダルウインドウで拡大表示されます。

カスタマイズできる内容
表示する画像は images/image.jpg を差し替えるだけで変更できます。タイトルや説明文は index.html、背景色やモーダルサイズ、角丸、影などは style.css で自由に編集できます。

数値調整
style.css の max-width:900px; を変更すると拡大画像の最大サイズが変わります。animation: image-modal-show .3s; の .3s は表示アニメーション時間です。値を大きくするとゆっくり表示され、小さくすると素早く表示されます。

レスポンシブ対応
レスポンシブ対応済みです。style.css の width:100%、max-width、max-height:85vh、および @media (max-width:640px) により、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、画像を画面サイズに合わせて表示できます。