2枚の画像を比較できるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

2枚の画像を比較できるスライダーを作る方法

2枚の画像を比較できるスライダーを作る方法を紹介します。このサンプルでは、1枚の画像をもう1枚の画像の上へ重ねて表示し、中央のスライダーを左右へドラッグすることで表示範囲を変更できます。同じ位置に配置した2枚の画像を直感的に比較できるため、画像の違いや変化を分かりやすく伝えられます。

Before・After画像の比較はもちろん、写真の加工前後、リフォーム前後、デザイン変更前後、AI画像の生成結果比較など、2枚の画像を見比べたい場面で便利です。HTML、CSS、JavaScriptだけで実装できるため、ライブラリを追加せずに導入できます。また、表示する画像を差し替えるだけで、さまざまな用途へ応用できます。

ドラッグ操作によって比較位置を自由に変更できるので、細かな違いも確認しやすいのが特徴です。比較画像の変更やサイズ調整、デザインのカスタマイズも行いやすく、商品紹介ページやポートフォリオ、施工事例など、実際のWebサイトでも利用しやすい画像比較スライダーです。

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

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

デモ

画像1

画像2

中央のバーを左右へドラッグすると2枚の画像を比較できます。

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

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

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>2枚の画像を比較できるスライダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 画像比較スライダー全体 -->
  <div class="image-comparison-slider_demo">

    <!-- 画像比較エリア -->
    <div class="image-comparison-slider_box" id="image-comparison-slider-box">

      <!-- 下に表示する画像 -->
      <img class="image-comparison-slider_base" src="images/【ここに1枚目の画像ファイル名】" alt="画像1">

      <!-- 上に重ねる画像 -->
      <div class="image-comparison-slider_cover" id="image-comparison-slider-cover">
        <img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
      </div>

      <!-- ドラッグする中央バー -->
      <div class="image-comparison-slider_handle" id="image-comparison-slider-handle"></div>

      <!-- 左側ラベル -->
      <div class="image-comparison-slider_label image-comparison-slider_label-left">
        画像1
      </div>

      <!-- 右側ラベル -->
      <div class="image-comparison-slider_label image-comparison-slider_label-right">
        画像2
      </div>

    </div>

    <!-- 操作説明 -->
    <div class="image-comparison-slider_notice">
      中央のバーを左右へドラッグすると、2枚の画像を比較できます。
    </div>

  </div>

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

</body>
</html>

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

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

/* 画像比較エリア */
.image-comparison-slider_box{
  position:relative;  /* 重ねる画像やバーの配置基準 */
  overflow:hidden;  /* はみ出した部分を隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(15,23,42,.08);  /* 影 */
  cursor:ew-resize;  /* 左右に動かせることを示す */
  user-select:none;  /* ドラッグ中の文字選択を防ぐ */
}

/* 下に表示する画像 */
.image-comparison-slider_base{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:auto;  /* 縦横比を保つ */
  pointer-events:none;  /* ドラッグ操作を画像に邪魔させない */
}

/* 上に重ねる画像の表示範囲 */
.image-comparison-slider_cover{
  position:absolute;  /* 比較エリア内に重ねる */
  inset:0;  /* 上下左右いっぱい */
  width:50%;  /* 初期表示幅 */
  overflow:hidden;  /* 表示範囲外の画像を隠す */
}

/* 上に重ねる画像 */
.image-comparison-slider_cover img{
  display:block;  /* 画像下の余白を消す */
  width:760px;  /* 比較エリアと同じ横幅にする */
  max-width:none;  /* 親要素幅で縮まないようにする */
  height:auto;  /* 縦横比を保つ */
  pointer-events:none;  /* ドラッグ操作を画像に邪魔させない */
}

/* ドラッグする中央バー */
.image-comparison-slider_handle{
  position:absolute;  /* 比較エリア内に配置 */
  top:0;  /* 上端に合わせる */
  left:50%;  /* 初期位置 */
  width:4px;  /* バーの太さ */
  height:100%;  /* 高さいっぱい */
  background:#ffffff;  /* バーの色 */
  transform:translateX(-50%);  /* 中央位置を合わせる */
}

/* 中央バーの丸いボタン */
.image-comparison-slider_handle::after{
  content:"⇆";  /* ボタン内の表示 */
  position:absolute;  /* バー中央に配置 */
  top:50%;  /* 縦中央 */
  left:50%;  /* 横中央 */
  transform:translate(-50%,-50%);  /* 中央位置を合わせる */
  width:48px;  /* 丸ボタン横幅 */
  height:48px;  /* 丸ボタン高さ */
  border-radius:50%;  /* 円形 */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  display:flex;  /* 中央配置用 */
  align-items:center;  /* 縦方向中央 */
  justify-content:center;  /* 横方向中央 */
  font-weight:700;  /* 文字の太さ */
  box-shadow:0 4px 12px rgba(0,0,0,.25);  /* 影 */
}

/* ラベル共通 */
.image-comparison-slider_label{
  position:absolute;  /* 画像上に配置 */
  top:12px;  /* 上からの位置 */
  padding:6px 12px;  /* 内側余白 */
  border-radius:999px;  /* 丸いラベル */
  background:rgba(15,23,42,.70);  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:14px;  /* 文字サイズ */
  font-weight:700;  /* 文字の太さ */
}

/* 左側ラベル */
.image-comparison-slider_label-left{
  left:12px;  /* 左からの位置 */
}

/* 右側ラベル */
.image-comparison-slider_label-right{
  right:12px;  /* 右からの位置 */
}

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

// 画像比較エリアを取得
const imageComparisonSliderBox=document.getElementById("image-comparison-slider-box");

// 上に重ねる画像の表示範囲を取得
const imageComparisonSliderCover=document.getElementById("image-comparison-slider-cover");

// ドラッグする中央バーを取得
const imageComparisonSliderHandle=document.getElementById("image-comparison-slider-handle");

// ドラッグ中かどうかを管理
let imageComparisonSliderDragging=false;

// 比較位置を更新する関数
function imageComparisonSliderMove(clientX){

  // 比較エリアの位置とサイズを取得
  const rect=imageComparisonSliderBox.getBoundingClientRect();

  // 比較エリア左端からのマウス位置を計算
  let x=clientX-rect.left;

  // 左端より外へ出ないようにする
  if(x<0){
    x=0;
  }

  // 右端より外へ出ないようにする
  if(x>rect.width){
    x=rect.width;
  }

  // 横位置をパーセントへ変換
  const percent=x/rect.width*100;

  // 上に重ねる画像の表示幅を変更
  imageComparisonSliderCover.style.width=percent+"%";

  // 中央バーの位置を変更
  imageComparisonSliderHandle.style.left=percent+"%";

}

// マウスを押したらドラッグ開始
imageComparisonSliderHandle.addEventListener("mousedown",function(){
  imageComparisonSliderDragging=true;
});

// 比較エリア上でマウスを押してもドラッグ開始
imageComparisonSliderBox.addEventListener("mousedown",function(event){
  imageComparisonSliderDragging=true;
  imageComparisonSliderMove(event.clientX);
});

// マウスを離したらドラッグ終了
document.addEventListener("mouseup",function(){
  imageComparisonSliderDragging=false;
});

// マウス移動中に比較位置を更新
document.addEventListener("mousemove",function(event){

  // ドラッグ中でなければ処理しない
  if(!imageComparisonSliderDragging){
    return;
  }

  // 比較位置を更新
  imageComparisonSliderMove(event.clientX);

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、比較に使用する2枚の画像で構成されています。HTMLでは2枚の画像を重ねて配置し、CSSでは画像の表示範囲や中央バー、ラベルなどのデザインを設定します。JavaScriptではマウスの位置を取得し、中央のバーを左右へドラッグすることで上側の画像の表示範囲を変更します。

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

各ファイルの役割
index.htmlは画像比較スライダー全体を構成するファイルです。比較する2枚の画像、左右の「画像1」「画像2」ラベル、操作説明を変更できます。画像ファイルはimagesフォルダに配置し、srcへ実際のファイル名を指定します。

style.cssは画像比較エリアの横幅、枠線、角丸、影、中央バー、丸い操作ボタン、左右のラベルなどの見た目を設定するファイルです。

script.jsは画像を比較する位置を変更するファイルです。マウスを押した位置と移動位置を取得し、上に重ねた画像の横幅と中央バーの位置を同時に変更します。左端から右端まで自由に動かして2枚の画像を比較できます。

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

ファイルを配置したあと、sample/index.htmlをブラウザで開きます。中央のバーまたは画像上でマウスを押し、そのまま左右へドラッグすると比較位置が移動します。バーを左へ動かすと上に重ねた画像の表示範囲が狭くなり、右へ動かすと広くなります。

カスタマイズできる内容
index.htmlでは比較する2枚の画像、画像のalt属性、「画像1」「画像2」のラベル、スライダー下部の操作説明を変更できます。比較したい画像へ差し替える場合は、imagesフォルダへ画像を配置して、それぞれのsrcを変更します。

style.cssではスライダー全体の最大横幅、枠線、角丸、背景色、影、中央バーの太さや色、丸い操作ボタンのサイズや色、ラベルの位置・余白・文字サイズなどを変更できます。また、width:50%;とleft:50%;を変更すると、最初に表示される比較位置を調整できます。

数値調整
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を変更すると影の位置や広がりを調整できます。

width:50%;
上に重ねる画像の初期表示範囲です。50%では2枚の画像が中央で分かれた状態から始まります。値を小さくすると1枚目の表示範囲が狭くなり、大きくすると広くなります。

width:4px;
中央バーの太さです。値を大きくするとバーが太くなり、小さくすると細くなります。

left:50%;
中央バーの初期位置です。上に重ねる画像のwidth:50%;と同じ値にすることで、画像の境界とバーの位置を合わせています。

width:48px; / height:48px;
中央バーに表示する丸い操作ボタンのサイズです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

top:12px;
左右の画像ラベルを上端からどれだけ離すかを指定しています。値を大きくするとラベルが下へ移動します。

padding:6px 12px;
画像ラベルの内側余白です。6pxは上下、12pxは左右の余白を表します。

font-size:14px;
「画像1」「画像2」ラベルの文字サイズです。値を大きくすると文字が大きくなります。

left:12px; / right:12px;
左右の画像ラベルと画像端との間隔です。値を大きくするとラベルが内側へ移動します。

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

レスポンシブ対応
このサンプルは、画像比較スライダーにmax-width:760px;を指定し、下側の画像にwidth:100%;とheight:auto;を設定しています。そのため、表示領域が760pxより小さい場合は画面幅に合わせて画像比較エリアが縮小します。PCだけでなく、画面幅の狭い環境でも比較エリア自体は収まる構成になっています。