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

複数画像をドロワーメニューで表示する方法

複数画像をドロワーメニューで表示する方法を紹介します。このサンプルでは、「画像を表示」ボタンをクリックすると画面左側からドロワーメニューが開き、その中に複数の画像を一覧表示できます。HTMLで画像とドロワーメニューの構造を作成し、CSSで画像一覧のレイアウトや開閉アニメーションを設定、JavaScriptで表示と非表示を制御します。

画像は2列のギャラリー形式で配置され、ドロワーメニュー内を縦にスクロールして確認できます。作品紹介、商品画像、施工事例、写真一覧など、通常のページ領域を大きく使わずに複数画像を見せたい場面で利用できます。

ドロワーメニューは「閉じる」ボタンまたは背景部分をクリックすると閉じられます。画像のURLや代替テキスト、表示枚数はHTMLで変更でき、ドロワーメニューの横幅、画像間の余白、角丸、影、表示速度などは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="multiple-images-drawer-menu_wrap">

    <!-- タイトル -->
    <div class="multiple-images-drawer-menu_title">
      複数画像をドロワーメニューで表示する方法
    </div>

    <!-- 説明文 -->
    <p class="multiple-images-drawer-menu_text">
      ボタンをクリックすると、ドロワーメニュー内へ複数画像を一覧表示できます。
    </p>

    <!-- ドロワーメニューを開くボタン -->
    <button
      class="multiple-images-drawer-menu_open"
      type="button"
      data-drawer-open>
      ギャラリーを表示
    </button>

  </div>

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

    <!-- ドロワーメニュー本体 -->
    <div
      class="multiple-images-drawer-menu_drawer"
      role="dialog"
      aria-modal="true"
      aria-labelledby="multiple-images-drawer-menu-title">

      <!-- ドロワーメニューのタイトル -->
      <div
        class="multiple-images-drawer-menu_drawer-title"
        id="multiple-images-drawer-menu-title">
        画像ギャラリー
      </div>

      <!-- 説明文 -->
      <p class="multiple-images-drawer-menu_drawer-text">
        ドロワーメニュー内で複数画像を一覧表示できます。
      </p>

      <!-- 画像一覧 -->
      <div class="multiple-images-drawer-menu_gallery">

        <!-- 1枚目の画像
             src="" の "" の中へ表示したい画像URLを入力する
             alt="" の "" の中へ画像の内容が分かる説明を書く -->
        <div class="multiple-images-drawer-menu_image">
          <img
            src="https://picsum.photos/seed/gallery1/600/400"
            alt="サンプル画像1">
        </div>

        <!-- 2枚目の画像
             src="" の "" の中へ表示したい画像URLを入力する
             alt="" の "" の中へ画像の内容が分かる説明を書く -->
        <div class="multiple-images-drawer-menu_image">
          <img
            src="https://picsum.photos/seed/gallery2/600/400"
            alt="サンプル画像2">
        </div>

        <!-- 3枚目の画像
             src="" の "" の中へ表示したい画像URLを入力する
             alt="" の "" の中へ画像の内容が分かる説明を書く -->
        <div class="multiple-images-drawer-menu_image">
          <img
            src="https://picsum.photos/seed/gallery3/600/400"
            alt="サンプル画像3">
        </div>

        <!-- 4枚目の画像
             src="" の "" の中へ表示したい画像URLを入力する
             alt="" の "" の中へ画像の内容が分かる説明を書く -->
        <div class="multiple-images-drawer-menu_image">
          <img
            src="https://picsum.photos/seed/gallery4/600/400"
            alt="サンプル画像4">
        </div>

        <!-- 5枚目の画像
             src="" の "" の中へ表示したい画像URLを入力する
             alt="" の "" の中へ画像の内容が分かる説明を書く -->
        <div class="multiple-images-drawer-menu_image">
          <img
            src="https://picsum.photos/seed/gallery5/600/400"
            alt="サンプル画像5">
        </div>

        <!-- 6枚目の画像
             src="" の "" の中へ表示したい画像URLを入力する
             alt="" の "" の中へ画像の内容が分かる説明を書く -->
        <div class="multiple-images-drawer-menu_image">
          <img
            src="https://picsum.photos/seed/gallery6/600/400"
            alt="サンプル画像6">
        </div>

      </div>

      <!-- 閉じるボタン -->
      <button
        class="multiple-images-drawer-menu_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; /* 親要素と同じフォントを使用 */
}

/* =========================================
   案内エリア
========================================= */

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

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

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

/* ドロワーメニューを開くボタン */
.multiple-images-drawer-menu_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 24px; /* 上下12px・左右24pxの内側余白。値を大きくするとボタンが大きくなる */
  border:none; /* ブラウザ標準の枠線を削除 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字を太字にする */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化。値を大きくすると遅く、小さくすると速くなる */
}

/* 開くボタンへマウスを重ねた状態 */
.multiple-images-drawer-menu_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

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

/* ドロワーメニュー表示時の背景 */
.multiple-images-drawer-menu_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を大きくすると暗く、小さくすると薄くなる */
}

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

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

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

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

/* ドロワーメニューの説明文 */
.multiple-images-drawer-menu_drawer-text{
  margin:0 0 20px; /* 下側20pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
}

/* =========================================
   画像ギャラリー
========================================= */

/* 画像一覧 */
.multiple-images-drawer-menu_gallery{
  display:grid; /* 画像をグリッドレイアウトで配置 */
  grid-template-columns:repeat(2,minmax(0,1fr)); /* 画像を同じ横幅の2列で表示 */
  gap:12px; /* 画像同士の間隔。値を大きくすると間隔が広がる */
  margin:0 0 24px; /* 下側24pxの余白 */
}

/* 画像を囲む要素 */
.multiple-images-drawer-menu_image{
  overflow:hidden; /* 角丸の外側へ画像がはみ出すのを防ぐ */
  border-radius:12px; /* 画像の角丸。値を大きくすると丸みが強くなる */
  background:#e5e7eb; /* 画像読み込み前に表示する背景色 */
}

/* ギャラリー画像 */
.multiple-images-drawer-menu_image img{
  display:block; /* 画像下部の不要な余白を削除 */
  width:100%; /* 画像を親要素の横幅いっぱいに表示 */
  height:140px; /* 画像の高さ。値を大きくすると画像が高くなる */
  object-fit:cover; /* 縦横比を保ったまま表示枠を埋める */
}

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

/* ドロワーメニューを閉じるボタン */
.multiple-images-drawer-menu_close{
  width:100%; /* ドロワーメニューの横幅いっぱいに表示 */
  min-height:48px; /* タップしやすい最小高さ */
  padding:10px; /* ボタン内側の余白。値を大きくするとボタンが大きくなる */
  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秒で背景色を変化。値を大きくすると遅く、小さくすると速くなる */
}

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

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

@keyframes multiple-images-drawer-menu-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へページ余白を縮小 */
  }

  /* スマートフォン用の案内エリア */
  .multiple-images-drawer-menu_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小し、左右中央へ配置 */
    padding:24px 18px; /* 上下24px・左右18pxへ内側余白を縮小 */
  }

  /* スマートフォン用の開くボタン */
  .multiple-images-drawer-menu_open{
    width:100%; /* ボタンを案内エリアの横幅いっぱいに表示 */
  }

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

  /* スマートフォン用の画像一覧 */
  .multiple-images-drawer-menu_gallery{
    grid-template-columns:1fr; /* 画像を1列で表示 */
  }

  /* スマートフォン用のギャラリー画像 */
  .multiple-images-drawer-menu_image img{
    height:180px; /* スマートフォンでの画像高さ。値を大きくすると画像が高くなる */
  }

}

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

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

// ドロワーメニューを開くボタンを取得
const multipleImagesDrawerMenuOpen=document.querySelector(
  "[data-drawer-open]"
);

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

// =========================================
// ドロワーメニューを表示
// =========================================

// 開くボタンをクリックした時
multipleImagesDrawerMenuOpen.addEventListener("click",function(){

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

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

});

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

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

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

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

});

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

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

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

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

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

  }

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、「ギャラリーを表示」ボタンをクリックすると、画面左側から複数画像を表示するドロワーメニューが開きます。HTMLで画像一覧やボタンを配置し、CSSで画像ギャラリーとドロワーメニューのデザインを設定、JavaScriptで表示と非表示を制御しています。

サンプルでは6枚の画像を2列で表示しています。各画像はindex.html内のimgタグで設定しているため、src属性の画像URLとalt属性の説明文を書き換えることで、利用したい画像へ変更できます。

画像がドロワーメニューの高さに収まらない場合は、ドロワーメニュー内を縦にスクロールして確認できます。HTML・CSS・JavaScriptを分離しているため、画像の変更や追加、表示列数、余白、画像サイズ、ドロワーメニューの横幅などを用途に合わせて編集できます。

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

各ファイルの役割
index.html
案内エリア、ドロワーメニュー、画像一覧、開くボタン、閉じるボタンを配置しています。表示する画像を変更する場合は、各imgタグのsrc属性へ画像URLを設定し、alt属性へ画像内容を表す説明文を設定します。画像を追加または削除すると、ドロワーメニュー内に表示される画像枚数が変わります。

style.css
ページ全体、案内エリア、ドロワーメニュー、画像一覧、ボタン、表示アニメーション、レスポンシブ表示を設定しています。ドロワーメニューの横幅、画像の高さ、表示列数、画像同士の間隔、余白、角丸、影、色などを変更できます。

script.js
「ギャラリーを表示」ボタンでドロワーメニューを開く処理、「閉じる」ボタンで閉じる処理、背景部分をクリックした場合に閉じる処理を管理しています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルは同じ階層へ保存してください。準備ができたらsample/index.htmlをブラウザで開き、「ギャラリーを表示」ボタンをクリックすると動作を確認できます。

表示する画像を変更する場合は、index.html内にある次の部分を編集します。

src="https://picsum.photos/seed/gallery1/600/400"
alt="サンプル画像1"

src属性のURLを表示したい画像URLへ変更し、alt属性をその画像の内容が分かる説明文へ変更します。例えば風景画像へ変更する場合は、次のように設定します。

src="https://example.com/images/landscape.jpg"
alt="山と湖が写った風景"

2枚目以降も同じように、それぞれのimgタグにあるsrc属性とalt属性を書き換えてください。

カスタマイズできる内容
index.htmlでは、案内エリアのタイトル、説明文、ボタンの文字、ドロワーメニュー内のタイトル、説明文、画像URL、画像の代替テキスト、画像枚数を変更できます。

画像を追加する場合は、multiple-images-drawer-menu_imageクラスを付けた画像要素一式を、multiple-images-drawer-menu_gallery内へ追加します。画像を削除する場合は、不要なmultiple-images-drawer-menu_image要素を削除します。追加した画像にも、表示する画像URLをsrc属性へ設定し、画像内容を表す文章をalt属性へ設定してください。

style.cssでは、案内エリアとドロワーメニューの背景色、文字色、横幅、余白、角丸、影、画像サイズ、表示列数、画像同士の間隔、ボタンの色、表示アニメーションを変更できます。script.jsでは、ドロワーメニューを開く処理と閉じる処理を変更できます。

数値調整
style.cssのwidth:420pxはドロワーメニューの横幅です。値を大きくすると横幅が広がり、小さくすると狭くなります。

grid-template-columns:repeat(2,minmax(0,1fr))の2は画像の表示列数です。3へ変更すると3列、1へ変更すると1列で表示されます。

gap:12pxは画像同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

height:140pxはPC表示時の画像の高さです。値を大きくすると画像が高くなり、小さくすると低くなります。スマートフォン表示ではメディアクエリ内のheight:180pxで画像の高さを設定しています。

border-radius:12pxは画像の角丸です。値を大きくすると丸みが強くなり、0へ変更すると角丸がなくなります。

animation:multiple-images-drawer-menu-slide .35s ease forwardsの.35sはドロワーメニューの表示時間です。値を大きくするとゆっくり表示され、小さくすると速く表示されます。

レスポンシブ対応
style.cssではwidth:100%、max-width、overflow-y:auto、@media screen and (max-width:640px)を使用してレスポンシブ対応しています。PCとタブレットでは画像を2列で表示し、画面幅640px以下では画像を1列表示へ切り替えます。

スマートフォンではドロワーメニューを画面幅いっぱいに表示し、案内エリアの余白とドロワーメニュー内の余白を縮小します。スマートフォン・タブレット・PCで画面幅に合わせて表示でき、画像が多い場合はドロワーメニュー内を縦にスクロールできます。