画像を拡大表示できるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

画像を拡大表示できるスライダーを作る方法

画像を拡大表示できるスライダーを作る方法を紹介します。通常の画像スライダーに加えて、表示中の画像をクリックすると大きく確認できる拡大表示機能を付けたサンプルです。サムネイルや商品画像、作品ギャラリーなど、画像の細部まで見せたい場面で使いやすい構成になっています。

このサンプルでは、前へ・次へボタンで画像を切り替え、表示中の画像をクリックすると拡大表示エリアを開きます。拡大表示中は閉じるボタンで元の画面へ戻れるため、画像一覧と詳細確認を同じ画面内で完結できます。HTML、CSS、JavaScriptだけで実装できるので、WordPressに依存せず通常のWebページにも導入しやすい内容です。

ポートフォリオ、商品紹介、施工事例、写真ギャラリーなど、複数の画像を順番に見せながら必要に応じて大きく表示したい場合に便利です。画像パスや説明文、スライダーの見た目、切り替えボタンのデザインなどはコード内で変更できるため、サイトの雰囲気に合わせてカスタマイズできます。

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

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

デモ

画像をクリックすると拡大表示できます。

このデモでは、前へ・次へボタンで画像を切り替え、表示中の画像をクリックして拡大表示できます。

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

<!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-zoom-slider_demo">

    <!-- 画像表示エリア -->
    <div class="image-zoom-slider_view">

      <!-- 表示中の画像 -->
      <img id="image-zoom-slider-main" class="image-zoom-slider_image" src="images/【ここに1枚目の画像ファイル名】" alt="画像1">

    </div>

    <!-- 操作説明 -->
    <div class="image-zoom-slider_notice">
      前へ・次へボタンで画像を切り替え、画像をクリックすると拡大表示できます。
    </div>

    <!-- 操作ボタン -->
    <div class="image-zoom-slider_buttons">
      <button class="image-zoom-slider_button" type="button" data-direction="prev">前へ</button>
      <button class="image-zoom-slider_button" type="button" data-direction="next">次へ</button>
    </div>

  </div>

  <!-- 拡大表示エリア -->
  <div class="image-zoom-slider_overlay" aria-hidden="true">

    <!-- 拡大画像ボックス -->
    <div class="image-zoom-slider_zoombox">

      <!-- 閉じるボタン -->
      <button class="image-zoom-slider_close" type="button">×</button>

      <!-- 拡大画像 -->
      <img class="image-zoom-slider_zoomimage" src="images/【ここに1枚目の画像ファイル名】" alt="拡大表示画像">

    </div>

  </div>

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

</body>
</html>

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

/* 画像拡大スライダー全体 */
.image-zoom-slider_demo{
  max-width:760px;  /* 最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* 画像表示エリア */
.image-zoom-slider_view{
  overflow:hidden;  /* はみ出した部分を隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(15,23,42,.08);  /* 影 */
}

/* 表示中の画像 */
.image-zoom-slider_image{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:auto;  /* 縦横比を保つ */
  cursor:zoom-in;  /* 拡大できることを示す */
}

/* 操作説明 */
.image-zoom-slider_notice{
  margin-top:16px;  /* 上余白 */
  text-align:center;  /* 中央寄せ */
  color:#2563eb;  /* 文字色 */
  font-weight:700;  /* 太字 */
}

/* 操作ボタンエリア */
.image-zoom-slider_buttons{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:12px;  /* ボタン同士の間隔 */
  margin-top:18px;  /* 上余白 */
}

/* 操作ボタン */
.image-zoom-slider_button{
  padding:10px 18px;  /* ボタン内側の余白 */
  border:none;  /* 枠線なし */
  border-radius:999px;  /* 丸いボタン */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-weight:700;  /* 太字 */
  cursor:pointer;  /* クリックできることを示す */
}

/* 拡大表示エリア */
.image-zoom-slider_overlay{
  position:fixed;  /* 画面全体に固定 */
  inset:0;  /* 上下左右いっぱい */
  z-index:9999;  /* 前面に表示 */
  display:none;  /* 最初は非表示 */
  align-items:center;  /* 縦方向中央 */
  justify-content:center;  /* 横方向中央 */
  padding:24px;  /* 画面端との余白 */
  background:rgba(15,23,42,.75);  /* 背景の暗さ */
}

/* 拡大表示を開いた状態 */
.image-zoom-slider_overlay.is-open{
  display:flex;  /* 拡大表示を表示 */
}

/* 拡大画像ボックス */
.image-zoom-slider_zoombox{
  position:relative;  /* 閉じるボタンの配置基準 */
  width:min(900px,100%);  /* 最大横幅 */
}

/* 拡大画像 */
.image-zoom-slider_zoomimage{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  max-height:80vh;  /* 最大高さ */
  object-fit:contain;  /* 画像全体を表示 */
  border-radius:16px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
}

/* 閉じるボタン */
.image-zoom-slider_close{
  position:absolute;  /* 拡大画像の右上へ配置 */
  top:-14px;  /* 上方向の位置 */
  right:-14px;  /* 右方向の位置 */
  width:42px;  /* ボタン横幅 */
  height:42px;  /* ボタン高さ */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 背景色 */
  color:#0f172a;  /* 文字色 */
  font-size:22px;  /* 文字サイズ */
  font-weight:700;  /* 太字 */
  cursor:pointer;  /* クリックできることを示す */
}

// スライダーで使用する画像
const imageZoomSliderImages=[
  "images/【ここに1枚目の画像ファイル名】",
  "images/【ここに2枚目の画像ファイル名】",
  "images/【ここに3枚目の画像ファイル名】"
];

// 現在表示している画像番号
let imageZoomSliderIndex=0;

// 表示中の画像を取得
const imageZoomSliderMain=document.getElementById("image-zoom-slider-main");

// 操作ボタンをすべて取得
const imageZoomSliderButtons=document.querySelectorAll(".image-zoom-slider_button");

// 拡大表示エリアを取得
const imageZoomSliderOverlay=document.querySelector(".image-zoom-slider_overlay");

// 拡大画像を取得
const imageZoomSliderZoomImage=document.querySelector(".image-zoom-slider_zoomimage");

// 閉じるボタンを取得
const imageZoomSliderClose=document.querySelector(".image-zoom-slider_close");

// 操作ボタンをクリックした時の処理
imageZoomSliderButtons.forEach(function(button){

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

    // ボタンの方向を取得
    const direction=button.dataset.direction;

    // 次へボタンの場合
    if(direction==="next"){
      imageZoomSliderIndex=(imageZoomSliderIndex+1)%imageZoomSliderImages.length;
    }

    // 前へボタンの場合
    if(direction==="prev"){
      imageZoomSliderIndex=(imageZoomSliderIndex-1+imageZoomSliderImages.length)%imageZoomSliderImages.length;
    }

    // 表示画像を切り替える
    imageZoomSliderMain.src=imageZoomSliderImages[imageZoomSliderIndex];

  });

});

// 表示中の画像をクリックした時の処理
imageZoomSliderMain.addEventListener("click",function(){

  // 現在の画像を拡大画像へ反映
  imageZoomSliderZoomImage.src=imageZoomSliderImages[imageZoomSliderIndex];

  // 拡大表示を開く
  imageZoomSliderOverlay.classList.add("is-open");

  // 表示状態を変更
  imageZoomSliderOverlay.setAttribute("aria-hidden","false");

});

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

  // 拡大表示を閉じる
  imageZoomSliderOverlay.classList.remove("is-open");

  // 非表示状態を変更
  imageZoomSliderOverlay.setAttribute("aria-hidden","true");

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像で構成されています。HTMLでは画像の表示エリア、前へ・次へボタン、クリックした画像を拡大表示するエリアを作成します。CSSではスライダーやボタン、画面全体に表示する拡大エリアのデザインを設定し、JavaScriptでは画像の切り替えと拡大表示の開閉を行います。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像ファイル名】
    ├── 【ここに2枚目の画像ファイル名】
    └── 【ここに3枚目の画像ファイル名】

各ファイルの役割
index.htmlは画像スライダー全体を構成するファイルです。最初に表示する画像、操作説明、前へ・次へボタン、拡大表示エリア、閉じるボタンを配置しています。最初に表示する画像はsrcのファイル名を変更して設定できます。

style.cssはスライダーと拡大表示のデザインを設定するファイルです。スライダーの横幅、枠線、角丸、影、操作説明、前へ・次へボタン、拡大表示時の背景、拡大画像のサイズ、閉じるボタンなどを変更できます。

script.jsは画像の切り替えと拡大表示を制御するファイルです。使用する3枚の画像を配列で管理し、前へ・次へボタンをクリックすると表示画像を切り替えます。表示中の画像をクリックすると同じ画像を拡大表示し、閉じるボタンをクリックすると拡大表示を閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成して使用する3枚の画像を保存します。index.htmlとscript.jsに記載されているimages/【ここに○枚目の画像ファイル名】を、実際に配置した画像ファイル名へ変更してください。

ファイルを配置したあと、sample/index.htmlをブラウザで開きます。「前へ」「次へ」ボタンをクリックすると画像が順番に切り替わります。最後の画像から「次へ」を押すと1枚目へ戻り、1枚目から「前へ」を押すと最後の画像へ移動します。表示中の画像をクリックすると画面上に拡大表示され、「×」ボタンをクリックすると元のスライダーへ戻ります。

カスタマイズできる内容
index.htmlでは最初に表示する画像、画像のalt属性、操作説明、「前へ」「次へ」の表示内容、拡大表示時の画像を変更できます。画像を差し替える場合はimagesフォルダへ画像を配置し、index.htmlとscript.jsの画像ファイル名を実際のファイル名へ変更します。

script.jsではimageZoomSliderImagesに登録している画像を変更できます。配列へ記載する画像ファイルのパスを変更することで、スライダーで切り替える画像を指定できます。

style.cssではスライダーの最大横幅、背景色、枠線、角丸、影、操作説明の文字色、ボタンの余白や色、拡大表示時の背景の暗さ、拡大画像の最大サイズ、閉じるボタンの位置やサイズなどを変更できます。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がります。

max-width:760px;
画像スライダーの最大横幅です。値を大きくすると広く表示され、小さくするとコンパクトになります。

border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 10px 30px rgba(15,23,42,.08);
画像表示エリアの影です。10pxや30pxを変更すると影の位置や広がりを調整できます。

margin-top:16px;
画像と操作説明の間隔です。値を大きくすると間隔が広がります。

gap:12px;
「前へ」「次へ」ボタン同士の間隔です。値を大きくするとボタン同士が離れ、小さくすると近くなります。

margin-top:18px;
操作説明とボタンエリアの間隔です。値を大きくすると上下の間隔が広がります。

padding:10px 18px;
「前へ」「次へ」ボタンの内側余白です。10pxは上下、18pxは左右の余白を表します。

padding:24px;
拡大表示した画像と画面端との余白です。値を大きくすると画面端との間隔が広がります。

width:min(900px,100%);
拡大画像ボックスの横幅です。最大900pxで表示し、画面が狭い場合は利用できる横幅に合わせて縮小します。

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

border-radius:16px;
拡大画像の角丸です。値を大きくすると丸みが強くなります。

top:-14px; / right:-14px;
閉じるボタンの位置です。拡大画像ボックスの右上から外側へ14pxずらして配置しています。

width:42px; / height:42px;
閉じるボタンのサイズです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

font-size:22px;
閉じるボタンに表示する「×」の文字サイズです。値を大きくすると「×」が大きく表示されます。

レスポンシブ対応
このサンプルは画面幅に合わせて縮小できる構成です。style.cssのmax-width:760pxと画像のwidth:100%により、画面が狭い場合はスライダーと画像が利用できる横幅に合わせて縮小されます。拡大表示ではwidth:min(900px,100%)、max-height:80vh、object-fit:containを使用しているため、拡大画像も画面内に収まりやすい表示になります。