画像をドロワーメニューに拡大表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

画像をドロワーメニューに拡大表示する方法

画像をドロワーメニューに拡大表示する方法を紹介します。このサンプルでは、ページ内に表示された画像の「画像を拡大表示」ボタンをクリックすると、画面左側からドロワーメニューが開き、同じ画像を大きなサイズで確認できます。HTMLで画像とドロワーメニューの構造を作成し、CSSで表示サイズやレイアウトを設定、JavaScriptで開閉処理を制御します。

商品写真、作品画像、施工事例、旅行写真など、ページ内では小さく表示している画像を詳しく見せたい場面に利用できます。画像はドロワーメニューの横幅に合わせて自動的に縮小されるため、元画像の縦横比を保ったまま表示できます。

ドロワーメニューは「閉じる」ボタンまたは背景部分をクリックすると閉じられます。表示する画像はHTML内の画像URLと代替テキストを書き換えることで変更でき、ドロワーメニューの横幅、余白、角丸、影、表示アニメーションなどはCSSで調整できます。

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

免責事項
本記事のコードを利用したことによる損害について、当サイトでは責任を負いかねます。必要に応じて環境に合わせて調整してください。

デモ

画像をドロワーメニューに拡大表示

サムネイル画像をクリックすると、ドロワーメニュー内へ拡大表示できます。

サムネイル画像をクリックすると、選択した画像をドロワーメニュー内へ拡大表示できます。
「閉じる」ボタンまたは背景部分をクリックするとドロワーメニューを閉じられます。

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

<!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-drawer-enlarge_wrap">

    <!-- タイトル -->
    <div class="image-drawer-enlarge_title">
      画像をドロワーメニューに拡大表示
    </div>

    <!-- 操作説明 -->
    <p class="image-drawer-enlarge_text">
      サムネイル画像をクリックすると、ドロワーメニュー内へ拡大表示できます。
    </p>

    <!-- サムネイル画像一覧 -->
    <div class="image-drawer-enlarge_gallery">

      <!-- 1枚目の画像
           data-drawer-image="" の中へ拡大表示する画像URLを入力する
           src="" の中へサムネイルとして表示する画像URLを入力する
           alt="" の中へ画像内容が分かる説明文を入力する -->
      <button
        class="image-drawer-enlarge_thumb"
        type="button"
        data-drawer-image="https://picsum.photos/seed/gal1/900/600">

        <img
          src="https://picsum.photos/seed/gal1/600/400"
          alt="森林の中に続く小道">

      </button>

      <!-- 2枚目の画像
           data-drawer-image="" の中へ拡大表示する画像URLを入力する
           src="" の中へサムネイルとして表示する画像URLを入力する
           alt="" の中へ画像内容が分かる説明文を入力する -->
      <button
        class="image-drawer-enlarge_thumb"
        type="button"
        data-drawer-image="https://picsum.photos/seed/gal2/900/600">

        <img
          src="https://picsum.photos/seed/gal2/600/400"
          alt="夜の街と橋の風景">

      </button>

      <!-- 3枚目の画像
           data-drawer-image="" の中へ拡大表示する画像URLを入力する
           src="" の中へサムネイルとして表示する画像URLを入力する
           alt="" の中へ画像内容が分かる説明文を入力する -->
      <button
        class="image-drawer-enlarge_thumb"
        type="button"
        data-drawer-image="https://picsum.photos/seed/gal3/900/600">

        <img
          src="https://picsum.photos/seed/gal3/600/400"
          alt="レコードプレーヤーの写真">

      </button>

    </div>

  </div>

  <!-- ドロワーメニュー表示時の背景 -->
  <div
    class="image-drawer-enlarge_overlay"
    data-drawer-overlay
    aria-hidden="true">

    <!-- ドロワーメニュー本体 -->
    <div
      class="image-drawer-enlarge_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="image-drawer-enlarge-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="image-drawer-enlarge_drawer-title"
        id="image-drawer-enlarge-title">
        拡大画像
      </div>

      <!-- 選択した画像の拡大表示先 -->
      <img
        class="image-drawer-enlarge_large"
        src=""
        alt=""
        data-drawer-large-image>

      <!-- ドロワーメニューを閉じるボタン -->
      <button
        class="image-drawer-enlarge_close"
        type="button"
        data-drawer-close>
        閉じる
      </button>

    </div>

  </div>

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

</body>
</html>

/* =========================================
   共通設定
========================================= */

/* すべての要素と疑似要素 */
*,
*::before,
*::after{
  box-sizing:border-box; /* paddingとborderを要素の幅と高さに含める */
}

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxのページ余白。値を大きくすると余白が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
}

/* ページ内のボタン */
button{
  font:inherit; /* 親要素と同じフォントを使用 */
}

/* =========================================
   サムネイル画像の表示エリア
========================================= */

/* 表示エリア全体 */
.image-drawer-enlarge_wrap{
  width:100%; /* 画面幅に合わせて縮小表示 */
  max-width:700px; /* 最大横幅。値を大きくすると表示エリアが広がる */
  margin:40px auto; /* 上下40pxの余白を付け、左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 枠線の太さ・種類・色 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 表示エリアの背景色 */
  text-align:center; /* タイトルと説明文を中央揃え */
}

/* タイトル */
.image-drawer-enlarge_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトル文字を太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* 操作説明 */
.image-drawer-enlarge_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* =========================================
   サムネイル画像一覧
========================================= */

/* 画像一覧 */
.image-drawer-enlarge_gallery{
  display:grid; /* サムネイル画像をグリッドで配置 */
  grid-template-columns:repeat(3,minmax(0,1fr)); /* 同じ横幅の3列で表示 */
  gap:12px; /* 画像同士の間隔。値を大きくすると間隔が広がる */
}

/* サムネイル画像ボタン */
.image-drawer-enlarge_thumb{
  width:100%; /* グリッドの横幅いっぱいに表示 */
  padding:0; /* ボタン標準の内側余白を削除 */
  overflow:hidden; /* 角丸の外側へ画像がはみ出すのを防ぐ */
  border:none; /* ボタン標準の枠線を削除 */
  border-radius:12px; /* 角丸。値を大きくすると丸みが強くなる */
  background:none; /* ボタン標準の背景色を削除 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* サムネイル画像 */
.image-drawer-enlarge_thumb img{
  display:block; /* 画像下部の不要な余白を削除 */
  width:100%; /* ボタンの横幅いっぱいに表示 */
  height:140px; /* 画像の高さ。値を大きくすると画像が高くなる */
  object-fit:cover; /* 縦横比を保ちながら表示枠全体を埋める */
  transition:transform .2s ease; /* 0.2秒で画像を拡大。値を大きくすると遅くなる */
}

/* サムネイル画像へマウスを重ねた状態 */
.image-drawer-enlarge_thumb:hover img{
  transform:scale(1.05); /* 画像を105%へ拡大。値を大きくすると拡大率が高くなる */
}

/* =========================================
   ドロワーメニュー背景
========================================= */

/* ドロワーメニュー表示時の背景 */
.image-drawer-enlarge_overlay{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:stretch; /* ドロワーメニューを画面高へ伸ばす */
  justify-content:flex-start; /* ドロワーメニューを画面左側へ配置 */
  background:rgba(0,0,0,.5); /* 半透明の背景色。.5を大きくすると暗くなる */
}

/* ドロワーメニューの表示状態 */
.image-drawer-enlarge_overlay.is-active{
  display:flex; /* 表示用クラスが付いた時に表示 */
}

/* =========================================
   ドロワーメニュー本体
========================================= */

/* ドロワーメニュー本体 */
.image-drawer-enlarge_drawer{
  width:520px; /* ドロワーメニューの横幅。値を大きくすると広がる */
  max-width:92%; /* 小さい画面で画面幅を超えない最大横幅 */
  height:100%; /* ブラウザ画面と同じ高さにする */
  padding:28px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  overflow-y:auto; /* 内容が画面高を超えた場合に縦スクロールを表示 */
  background:#ffffff; /* ドロワーメニューの背景色 */
  box-shadow:10px 0 40px rgba(0,0,0,.2); /* 右側の影。数値を大きくすると影が広がる */
  animation:image-drawer-enlarge-slide .35s ease forwards; /* 0.35秒で左側から表示。値を大きくすると遅くなる */
}

/* ドロワーメニューのタイトル */
.image-drawer-enlarge_drawer-title{
  margin:0 0 16px; /* 下側16pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトル文字を太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* =========================================
   拡大画像
========================================= */

/* 選択した画像の拡大表示先 */
.image-drawer-enlarge_large{
  display:block; /* 画像下部の不要な余白を削除 */
  width:100%; /* ドロワーメニューの横幅いっぱいに表示 */
  height:auto; /* 画像本来の縦横比を維持 */
  max-height:70vh; /* 画面高の70%を最大高さにする */
  margin:0 0 24px; /* 下側24pxの余白 */
  border-radius:12px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#f3f4f6; /* 画像読み込み前の背景色 */
  object-fit:contain; /* 画像全体が表示範囲へ収まるようにする */
}

/* =========================================
   閉じるボタン
========================================= */

/* ドロワーメニューを閉じるボタン */
.image-drawer-enlarge_close{
  width:100%; /* ドロワーメニューの横幅いっぱいに表示 */
  min-height:48px; /* タップしやすい最小高さ */
  padding:10px 20px; /* 上下10px・左右20pxの内側余白 */
  border:none; /* ボタン標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅くなる */
}

/* 閉じるボタンへマウスを重ねた状態 */
.image-drawer-enlarge_close:hover{
  background:#374151; /* ホバー時の背景色 */
}

/* =========================================
   ドロワー表示アニメーション
========================================= */

@keyframes image-drawer-enlarge-slide{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 完全に透明な状態から開始 */
    transform:translateX(-100%); /* 画面左側の外から開始 */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示 */
    transform:translateX(0); /* 元の位置へ移動 */
  }

}

/* =========================================
   スマートフォン対応
========================================= */

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

  /* スマートフォン用のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへページ余白を縮小 */
  }

  /* スマートフォン用の表示エリア */
  .image-drawer-enlarge_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* スマートフォン用の画像一覧 */
  .image-drawer-enlarge_gallery{
    grid-template-columns:1fr; /* サムネイル画像を1列で表示 */
  }

  /* スマートフォン用のサムネイル画像 */
  .image-drawer-enlarge_thumb img{
    height:220px; /* スマートフォンでの画像高さ。値を大きくすると高くなる */
  }

  /* スマートフォン用のドロワーメニュー */
  .image-drawer-enlarge_drawer{
    width:100%; /* 画面幅いっぱいに表示 */
    max-width:100%; /* 最大横幅を画面幅に合わせる */
    padding:24px 20px; /* 内側余白を縮小 */
  }

}

// =========================================
// ドロワーメニューで使用する要素を取得
// =========================================

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

// ドロワーメニュー表示時の背景を取得
const imageDrawerEnlargeOverlay=document.querySelector(
  "[data-drawer-overlay]"
);

// 選択した画像を拡大表示する要素を取得
const imageDrawerEnlargeLargeImage=document.querySelector(
  "[data-drawer-large-image]"
);

// ドロワーメニューを閉じるボタンを取得
const imageDrawerEnlargeClose=document.querySelector(
  "[data-drawer-close]"
);

// =========================================
// 選択した画像を拡大表示
// =========================================

// 各サムネイル画像ボタンへクリック処理を設定
imageDrawerEnlargeButtons.forEach(function(button){

  // サムネイル画像をクリックした時
  button.addEventListener("click",function(){

    // ボタンのdata-drawer-image属性から拡大画像URLを取得
    const largeImageUrl=button.dataset.drawerImage;

    // ボタン内のサムネイル画像を取得
    const thumbnailImage=button.querySelector("img");

    // 選択した画像URLを拡大表示用画像へ設定
    imageDrawerEnlargeLargeImage.src=largeImageUrl;

    // サムネイル画像のalt属性を拡大画像へ設定
    imageDrawerEnlargeLargeImage.alt=thumbnailImage.alt;

    // ドロワーメニューへ表示用クラスを追加
    imageDrawerEnlargeOverlay.classList.add("is-active");

    // ドロワーメニューが表示中であることを支援技術へ伝える
    imageDrawerEnlargeOverlay.setAttribute(
      "aria-hidden",
      "false"
    );

  });

});

// =========================================
// ドロワーメニューを閉じる
// =========================================

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

  // ドロワーメニューから表示用クラスを削除
  imageDrawerEnlargeOverlay.classList.remove("is-active");

  // ドロワーメニューが非表示であることを支援技術へ伝える
  imageDrawerEnlargeOverlay.setAttribute(
    "aria-hidden",
    "true"
  );

  // 拡大表示用画像のURLを削除
  imageDrawerEnlargeLargeImage.src="";

  // 拡大表示用画像の説明文を削除
  imageDrawerEnlargeLargeImage.alt="";

});

// =========================================
// 背景クリックで閉じる
// =========================================

// ドロワーメニュー背景をクリックした時
imageDrawerEnlargeOverlay.addEventListener("click",function(event){

  // クリックされた要素が背景自身の場合だけ閉じる
  if(event.target===imageDrawerEnlargeOverlay){

    // ドロワーメニューから表示用クラスを削除
    imageDrawerEnlargeOverlay.classList.remove("is-active");

    // ドロワーメニューが非表示であることを支援技術へ伝える
    imageDrawerEnlargeOverlay.setAttribute(
      "aria-hidden",
      "true"
    );

    // 拡大表示用画像のURLを削除
    imageDrawerEnlargeLargeImage.src="";

    // 拡大表示用画像の説明文を削除
    imageDrawerEnlargeLargeImage.alt="";

  }

});

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。サムネイル画像をクリックすると、選択した画像をドロワーメニュー内へ拡大表示できるサンプルです。画像はHTMLで管理し、見た目はCSS、画像の切り替えやドロワーの開閉はJavaScriptが担当しています。

ドロワーメニューは画面左側からスライド表示され、選択した画像だけを大きく表示します。画像を追加したり差し替えたりする場合も、HTMLを書き換えるだけで利用できるため、商品一覧や作品ギャラリー、写真紹介ページなどにも応用できます。

レスポンシブにも対応しており、パソコン・タブレット・スマートフォンでもレイアウトが崩れにくい構成です。画像サイズやドロワーメニューの幅、アニメーション速度などもコード内のコメントを参考に変更できます。

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

各ファイルの役割
index.html
サムネイル画像・ドロワーメニュー・拡大画像のHTMLを記述しています。画像を変更する場合は、各画像の「src」「data-drawer-image」「alt」を編集してください。画像を追加・削除する場合も、このファイルを編集します。

style.css
サムネイル一覧、ドロワーメニュー、拡大画像、ボタン、レスポンシブ表示などデザイン全体を管理しています。色・余白・サイズ・角丸・影・アニメーションなどを変更できます。

script.js
サムネイル画像をクリックした際に拡大画像へ切り替え、ドロワーメニューを表示・非表示にする処理を記述しています。

設置方法・使い方
sampleフォルダへ index.html・style.css・script.js を配置します。
ブラウザで sample/index.html を開くと利用できます。
サムネイル画像をクリックすると、対応する画像がドロワーメニュー内へ拡大表示されます。閉じるボタン、または背景部分をクリックするとドロワーメニューを閉じられます。

カスタマイズできる内容
index.html
・サムネイル画像の追加・削除
・画像URL（src）の変更
・拡大表示する画像URL（data-drawer-image）の変更
・画像説明（alt）の変更
・タイトル・説明文の変更

style.css
・サムネイル画像の大きさ
・画像の並び数
・ドロワーメニューの幅
・背景色・文字色
・余白・角丸・影
・ボタンデザイン
・アニメーション速度

数値調整
style.css
animation:image-drawer-enlarge-slide .35s;
→ 0.35秒でドロワーメニューを表示します。値を大きくするとゆっくり、小さくすると速く表示されます。

width:520px;
→ ドロワーメニューの横幅です。値を大きくすると広く、小さくすると細くなります。

height:140px;
→ サムネイル画像の高さです。値を変更すると一覧画像の高さが変わります。

max-height:70vh;
→ 拡大画像の最大高さです。値を大きくすると、より大きく表示できます。

レスポンシブ対応
style.css の media query を使用してレスポンシブ対応しています。画面幅640px以下では画像一覧を1列表示へ切り替え、サムネイル画像やドロワーメニューのサイズも自動調整されます。パソコン・タブレット・スマートフォンで利用できます。