サムネイル画像をクリックして表示を切り替えるタブの作り方

タブ項目・サイズ・色・余白・初期表示などを設定して、HTML・CSS・JavaScriptを自動生成できます。

サムネイル画像をクリックすると、上に表示されているメイン画像が切り替わるタブの作り方を紹介します。複数の画像を小さなサムネイルとして並べ、見たい画像をクリックするだけで大きく表示できる仕組みです。

今回のデモでは、山と湖・海と青空・森と木々・街並みの4枚の画像を用意しています。サムネイルをクリックすると、対応する画像がメインエリアに表示され、画像名と現在の表示枚数も更新されます。選択中のサムネイルには青い枠線と淡い青色の背景が付き、どの画像を表示しているか一目で分かります。

サムネイルはパソコンでは横4列、スマートフォンでは2列に配置されます。また、キーボードの左右矢印キーでも画像を切り替えられ、Homeキーで最初の画像、Endキーで最後の画像を選択できます。Macでは、Homeキーは「fn + ←」、Endキーは「fn + →」で操作できます。

デモ

山と湖の風景

01 / 04

下に並んだサムネイル画像をクリックすると、上のメイン画像が切り替わります。選択したサムネイルには青い枠線が付き、画像名と表示枚数も更新されます。スマートフォンではサムネイルが2列で表示されます。

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

<!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="thumbnail-tab-switch_container">

    <!-- 選択中の画像を大きく表示 -->
    <div class="thumbnail-tab-switch_display" id="thumbnail-tab-switch-panel" role="tabpanel" aria-labelledby="thumbnail-tab-switch-tab-1">
      <!-- imagesフォルダにimage1.png～image4.pngを用意してください -->
      <img class="thumbnail-tab-switch_main-image" id="thumbnail-tab-switch-main" src="images/image1.png" alt="山と湖の風景">
    </div>

    <!-- 選択中の画像名と枚数 -->
    <div class="thumbnail-tab-switch_info">
      <p class="thumbnail-tab-switch_caption" id="thumbnail-tab-switch-caption">山と湖の風景</p>
      <span class="thumbnail-tab-switch_counter" id="thumbnail-tab-switch-counter">01 / 04</span>
    </div>

    <!-- 画像を切り替えるサムネイル一覧 -->
    <div class="thumbnail-tab-switch_tabs" role="tablist" aria-label="画像の切り替え">

      <!-- 1枚目：山と湖 -->
      <button class="thumbnail-tab-switch_tab is-active" id="thumbnail-tab-switch-tab-1" type="button" role="tab" aria-controls="thumbnail-tab-switch-panel" aria-selected="true" tabindex="0" data-image="images/image1.png" data-title="山と湖の風景">
        <img class="thumbnail-tab-switch_thumbnail" src="images/image1.png" alt="">
        <span class="thumbnail-tab-switch_label">山と湖</span>
      </button>

      <!-- 2枚目：海と青空 -->
      <button class="thumbnail-tab-switch_tab" id="thumbnail-tab-switch-tab-2" type="button" role="tab" aria-controls="thumbnail-tab-switch-panel" aria-selected="false" tabindex="-1" data-image="images/image2.png" data-title="海と青空の風景">
        <img class="thumbnail-tab-switch_thumbnail" src="images/image2.png" alt="">
        <span class="thumbnail-tab-switch_label">海と青空</span>
      </button>

      <!-- 3枚目：森と木々 -->
      <button class="thumbnail-tab-switch_tab" id="thumbnail-tab-switch-tab-3" type="button" role="tab" aria-controls="thumbnail-tab-switch-panel" aria-selected="false" tabindex="-1" data-image="images/image3.png" data-title="森と木々の自然風景">
        <img class="thumbnail-tab-switch_thumbnail" src="images/image3.png" alt="">
        <span class="thumbnail-tab-switch_label">森と木々</span>
      </button>

      <!-- 4枚目：街並み -->
      <button class="thumbnail-tab-switch_tab" id="thumbnail-tab-switch-tab-4" type="button" role="tab" aria-controls="thumbnail-tab-switch-panel" aria-selected="false" tabindex="-1" data-image="images/image4.png" data-title="街並みと建物">
        <img class="thumbnail-tab-switch_thumbnail" src="images/image4.png" alt="">
        <span class="thumbnail-tab-switch_label">街並み</span>
      </button>

    </div>

  </div>

  <!-- サムネイル画像切り替えタブのJavaScriptを読み込む -->
  <script src="script.js"></script>
</body>
</html>

/* =========================================
   サムネイル画像切り替えタブ全体
========================================= */

.thumbnail-tab-switch_container {
  width: 100%; /* 設置先の横幅に合わせる */
  max-width: 680px; /* 最大横幅。大きくすると全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右中央に配置する */
  padding: 24px; /* 内側の余白。大きくすると画像と外枠の間隔が広がる */
  border: 1px solid #e2e8f0; /* 外枠。1pxを大きくすると線が太くなる */
  border-radius: 20px; /* 全体の角丸。大きくすると丸みが強くなる */
  background: #ffffff; /* 全体の背景色 */
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06); /* 下方向12px・ぼかし36pxの影 */
  box-sizing: border-box; /* 余白と枠線を横幅に含める */
  font-family: sans-serif; /* 全体のフォント */
}

/* 全要素のサイズ計算を統一 */
.thumbnail-tab-switch_container * {
  box-sizing: border-box;
}

/* =========================================
   メイン画像の表示領域
========================================= */

.thumbnail-tab-switch_display {
  overflow: hidden; /* 画像が角丸の外側にはみ出さないようにする */
  border-radius: 14px; /* メイン画像の角丸 */
  background: #f1f5f9; /* 画像読み込み前の背景色 */
}

/* メイン画像 */
.thumbnail-tab-switch_main-image {
  display: block; /* 画像下部の余分な隙間をなくす */
  width: 100%; /* 表示領域の横幅いっぱいに広げる */
  aspect-ratio: 16 / 9; /* 画像の表示比率。16:9に固定する */
  object-fit: cover; /* 画像を表示領域いっぱいに収める */
}

/* =========================================
   画像名と表示枚数
========================================= */

/* 画像情報全体 */
.thumbnail-tab-switch_info {
  display: flex; /* 画像名と枚数を横並びにする */
  align-items: center; /* 上下中央に揃える */
  justify-content: space-between; /* 左右に振り分ける */
  gap: 12px; /* 画像名と枚数の間隔 */
  padding: 18px 2px 20px; /* 上18px・左右2px・下20pxの余白 */
}

/* 画像名 */
.thumbnail-tab-switch_caption {
  margin: 0; /* ブラウザ標準の余白をなくす */
  color: #1e293b; /* 文字色 */
  font-size: 16px; /* 画像名の文字サイズ */
  font-weight: 700; /* 文字の太さ */
  line-height: 1.5; /* 行の高さ */
}

/* 表示枚数 */
.thumbnail-tab-switch_counter {
  flex-shrink: 0; /* 枚数表示が縮まないようにする */
  color: #64748b; /* 文字色 */
  font-size: 13px; /* 枚数の文字サイズ */
  font-weight: 600; /* 文字の太さ */
  font-variant-numeric: tabular-nums; /* 数字の横幅を揃える */
}

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

/* サムネイルの並び */
.thumbnail-tab-switch_tabs {
  display: grid; /* サムネイルを格子状に配置する */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PCでは4列に配置する */
  gap: 12px; /* サムネイル同士の間隔 */
}

/* サムネイルボタン */
.thumbnail-tab-switch_tab {
  display: block; /* ボタンをブロック要素として表示する */
  width: 100%; /* 各列の横幅いっぱいに広げる */
  padding: 5px; /* 枠線と画像の間隔 */
  border: 2px solid transparent; /* 選択枠用の透明な枠線 */
  border-radius: 12px; /* ボタンの角丸 */
  background: transparent; /* 通常時の背景色 */
  color: #64748b; /* 通常時の文字色 */
  font: inherit; /* 親要素のフォントを引き継ぐ */
  cursor: pointer; /* マウスを重ねたときにポインターを表示する */
  transition: border-color 0.2s ease, background-color 0.2s ease; /* 枠線と背景色を0.2秒で変化させる */
}

/* マウスを重ねたサムネイル */
.thumbnail-tab-switch_tab:hover {
  background: #f1f5f9; /* ホバー時の背景色 */
}

/* 選択中のサムネイル */
.thumbnail-tab-switch_tab.is-active {
  border-color: #2563eb; /* 選択中の青い枠線 */
  background: #eff6ff; /* 選択中の淡い青色の背景 */
  color: #1d4ed8; /* 選択中の文字色 */
}

/* キーボードでフォーカスしたサムネイル */
.thumbnail-tab-switch_tab:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35); /* フォーカス時の外側の枠線 */
  outline-offset: 3px; /* ボタンとフォーカス枠の間隔 */
}

/* サムネイル画像 */
.thumbnail-tab-switch_thumbnail {
  display: block; /* 画像下部の余分な隙間をなくす */
  width: 100%; /* ボタンの横幅いっぱいに広げる */
  aspect-ratio: 4 / 3; /* サムネイルの表示比率 */
  border-radius: 6px; /* サムネイル画像の角丸 */
  object-fit: cover; /* 画像を表示領域いっぱいに収める */
}

/* サムネイルの画像名 */
.thumbnail-tab-switch_label {
  display: block; /* 画像名を画像の下に配置する */
  padding: 9px 2px 5px; /* 上9px・左右2px・下5pxの余白 */
  font-size: 12px; /* 画像名の文字サイズ */
  font-weight: 600; /* 文字の太さ */
  line-height: 1.4; /* 行の高さ */
  text-align: center; /* 文字を中央揃えにする */
}

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

@media (max-width: 640px) {

  /* 画面幅640px以下では全体の余白を小さくする */
  .thumbnail-tab-switch_container {
    margin: 24px auto; /* 上下の余白を24pxにする */
    padding: 14px; /* 内側の余白を14pxにする */
    border-radius: 16px; /* 全体の角丸を16pxにする */
  }

  /* メイン画像の角丸を小さくする */
  .thumbnail-tab-switch_display {
    border-radius: 10px; /* メイン画像の角丸 */
  }

  /* 画像情報の余白を調整する */
  .thumbnail-tab-switch_info {
    padding: 14px 2px 16px; /* 上14px・左右2px・下16pxの余白 */
  }

  /* 画像名の文字サイズを調整する */
  .thumbnail-tab-switch_caption {
    font-size: 14px; /* スマートフォンでの文字サイズ */
  }

  /* サムネイルを2列にする */
  .thumbnail-tab-switch_tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列表示 */
    gap: 10px; /* サムネイル同士の間隔 */
  }

  /* ボタンの角丸を調整する */
  .thumbnail-tab-switch_tab {
    border-radius: 10px; /* スマートフォンでの角丸 */
  }

}

/* =========================================
   アニメーションを抑える設定
========================================= */

@media (prefers-reduced-motion: reduce) {

  /* 動きを減らす設定では色の変化を即時反映する */
  .thumbnail-tab-switch_tab {
    transition: none;
  }

}

/* =========================================
   サムネイル画像の切り替え
========================================= */

(function() {

  // サムネイル画像切り替えタブ全体を取得する
  const container = document.querySelector(".thumbnail-tab-switch_container");

  // サムネイルボタンを配列として取得する
  const tabs = Array.from(container.querySelectorAll(".thumbnail-tab-switch_tab"));

  // メイン画像の表示領域を取得する
  const panel = container.querySelector("#thumbnail-tab-switch-panel");

  // メイン画像を取得する
  const mainImage = container.querySelector("#thumbnail-tab-switch-main");

  // 画像名の表示先を取得する
  const caption = container.querySelector("#thumbnail-tab-switch-caption");

  // 現在の表示枚数を表示する要素を取得する
  const counter = container.querySelector("#thumbnail-tab-switch-counter");

  /* =========================================
     指定したサムネイルの画像へ切り替える
  ========================================= */

  function switchImage(selectedTab) {

    // 選択されたサムネイルが何番目かを取得する
    const selectedIndex = tabs.indexOf(selectedTab);

    // 対象のサムネイルが存在しない場合は処理しない
    if (selectedIndex === -1) {
      return;
    }

    // 選択されたサムネイルに設定された画像へ切り替える
    mainImage.src = selectedTab.dataset.image;

    // メイン画像の代替テキストを更新する
    mainImage.alt = selectedTab.dataset.title;

    // 画像名を更新する
    caption.textContent = selectedTab.dataset.title;

    // 現在の画像番号と総枚数を2桁で表示する
    counter.textContent =
      String(selectedIndex + 1).padStart(2, "0") +
      " / " +
      String(tabs.length).padStart(2, "0");

    // すべてのサムネイルの選択状態を更新する
    tabs.forEach(function(tab) {

      // 現在のボタンが選択対象か判定する
      const isSelected = tab === selectedTab;

      // 選択中のボタンだけにis-activeクラスを付ける
      tab.classList.toggle("is-active", isSelected);

      // アクセシビリティ用の選択状態を更新する
      tab.setAttribute("aria-selected", String(isSelected));

      // 選択中のボタンだけをTabキーで移動できる対象にする
      tab.tabIndex = isSelected ? 0 : -1;

    });

    // メイン画像と選択中のタブを関連付ける
    panel.setAttribute("aria-labelledby", selectedTab.id);

  }

  /* =========================================
     クリックとキーボード操作
  ========================================= */

  tabs.forEach(function(tab, index) {

    // サムネイルをクリックしたときに画像を切り替える
    tab.addEventListener("click", function() {
      switchImage(tab);
    });

    // サムネイルにフォーカスがあるときのキーボード操作
    tab.addEventListener("keydown", function(event) {

      let nextIndex;

      // 右矢印キーで次の画像へ移動する
      if (event.key === "ArrowRight") {
        nextIndex = (index + 1) % tabs.length;

      // 左矢印キーで前の画像へ移動する
      } else if (event.key === "ArrowLeft") {
        nextIndex = (index - 1 + tabs.length) % tabs.length;

      // Homeキーで最初の画像へ移動する
      } else if (event.key === "Home") {
        nextIndex = 0;

      // Endキーで最後の画像へ移動する
      } else if (event.key === "End") {
        nextIndex = tabs.length - 1;

      // 対応していないキーでは何もしない
      } else {
        return;
      }

      // 矢印キーなどのブラウザ標準動作を停止する
      event.preventDefault();

      // 移動先の画像を表示する
      switchImage(tabs[nextIndex]);

      // 移動先のサムネイルへフォーカスを移す
      tabs[nextIndex].focus();

    });

  });

})();

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。 HTMLにメイン画像とサムネイルを配置し、CSSで表示サイズや選択状態を設定します。 JavaScriptでは画像の切り替えとキーボード操作を制御します。表示に使用する4枚の画像は利用者自身で用意してください。画像ファイルはZIPには含まれていません。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── image1.png
    ├── image2.png
    ├── image3.png
    └── image4.png

各ファイルの役割
index.htmlには、メイン画像、画像名、表示枚数、 4つのサムネイルボタンを配置しています。各ボタンには、切り替え先の画像パスと画像名を設定しています。
style.cssでは、メイン画像の縦横比、サムネイルの並び、選択中の枠線や背景色、画面幅に応じたレイアウトを指定しています。
script.jsでは、クリックされた画像への切り替え、画像名と枚数の更新、選択状態の変更、キーボード操作を処理しています。
imagesフォルダには、利用者が用意する4枚のPNG画像を配置します。

設置方法・使い方
「サンプル一式をダウンロード」からZIPファイルを保存して展開します。展開したsampleフォルダ内にimagesフォルダを作成し、 4枚のPNG画像をimage1.pngからimage4.pngの名前で保存してください。
画像を配置したらindex.htmlをブラウザで開きます。サムネイルをクリックすると、対応する画像がメインエリアに表示されます。キーボード操作は、サムネイルにフォーカスを合わせてから使用してください。

サムネイルと表示画像の設定
index.htmlでは、各ボタンのdata-imageに表示する画像のパス、 data-titleに画像名を設定しています。ボタン内のimgはサムネイルとして表示する画像です。

<!-- 1枚目：山と湖 -->
<button class="thumbnail-tab-switch_tab is-active" id="thumbnail-tab-switch-tab-1" type="button" role="tab" aria-controls="thumbnail-tab-switch-panel" aria-selected="true" tabindex="0" data-image="images/image1.png" data-title="山と湖の風景">
  <img class="thumbnail-tab-switch_thumbnail" src="images/image1.png" alt="">
  <span class="thumbnail-tab-switch_label">山と湖</span>
</button>

別の画像へ変更する場合は、data-imageとサムネイルのsrcを同じ画像パスに変更してください。 data-titleを変更するとメイン画像の名前と代替テキストが変わり、 thumbnail-tab-switch_labelを変更するとサムネイル下の文字が変わります。初期表示の画像を変更する場合は、メイン画像のsrcとalt、初期の画像名・枚数、各ボタンの選択状態も合わせて変更します。

クリックした画像へ切り替える仕組み
script.jsのswitchImage()では、選択されたサムネイルのdata-imageとdata-titleを取得します。取得した情報をメイン画像と画像名へ反映し、選択位置から「01 / 04」のような表示枚数を生成します。

// 選択されたサムネイルに設定された画像へ切り替える
mainImage.src = selectedTab.dataset.image;

// メイン画像の代替テキストを更新する
mainImage.alt = selectedTab.dataset.title;

// 画像名を更新する
caption.textContent = selectedTab.dataset.title;

// 現在の画像番号と総枚数を2桁で表示する
counter.textContent =
  String(selectedIndex + 1).padStart(2, "0") +
  " / " +
  String(tabs.length).padStart(2, "0");

selectedIndex + 1は現在の画像番号、 tabs.lengthはサムネイルの総数です。 padStart(2, "0")によって数字を2桁に揃えています。最初の数値2を変更すると、数字の最小表示桁数を調整できます。

選択中のサムネイルの表示
JavaScriptでは、選択したボタンだけにis-activeクラスを付けます。同時にaria-selectedとtabIndexを更新し、選択状態とキーボード操作の対象を一致させています。

// すべてのサムネイルの選択状態を更新する
tabs.forEach(function(tab) {

  // 現在のボタンが選択対象か判定する
  const isSelected = tab === selectedTab;

  // 選択中のボタンだけにis-activeクラスを付ける
  tab.classList.toggle("is-active", isSelected);

  // アクセシビリティ用の選択状態を更新する
  tab.setAttribute("aria-selected", String(isSelected));

  // 選択中のボタンだけをTabキーで移動できる対象にする
  tab.tabIndex = isSelected ? 0 : -1;

});

選択中のデザインはstyle.cssの .thumbnail-tab-switch_tab.is-activeで指定しています。 border-colorで枠線の色、 backgroundで背景色、 colorで文字色を変更できます。

/* 選択中のサムネイル */
.thumbnail-tab-switch_tab.is-active {
  border-color: #2563eb; /* 選択中の青い枠線 */
  background: #eff6ff; /* 選択中の淡い青色の背景 */
  color: #1d4ed8; /* 選択中の文字色 */
}

キーボードによる画像の切り替え
script.jsでは、押されたキーに応じて移動先の画像番号を計算しています。右矢印キーで次の画像、左矢印キーで前の画像へ移動します。最後の画像から右へ進むと最初へ戻り、最初の画像から左へ進むと最後へ移動します。 HomeキーとEndキーは、それぞれ最初と最後の画像を直接選択します。

// 右矢印キーで次の画像へ移動する
if (event.key === "ArrowRight") {
  nextIndex = (index + 1) % tabs.length;

// 左矢印キーで前の画像へ移動する
} else if (event.key === "ArrowLeft") {
  nextIndex = (index - 1 + tabs.length) % tabs.length;

// Homeキーで最初の画像へ移動する
} else if (event.key === "Home") {
  nextIndex = 0;

// Endキーで最後の画像へ移動する
} else if (event.key === "End") {
  nextIndex = tabs.length - 1;

% tabs.lengthは、画像番号を総数の範囲内で循環させるための計算です。移動先が決まるとswitchImage()で画像を切り替え、 focus()で対象のサムネイルにフォーカスを移します。

メイン画像とサムネイルの表示比率
style.cssでは、メイン画像を16:9、サムネイルを4:3の縦横比で表示しています。 object-fit: coverにより、画像の縦横比を保ったまま表示領域を埋めます。 aspect-ratioを変更すると表示領域の形が変わり、画像が切り取られる範囲も変化します。

/* メイン画像 */
.thumbnail-tab-switch_main-image {
  display: block; /* 画像下部の余分な隙間をなくす */
  width: 100%; /* 表示領域の横幅いっぱいに広げる */
  aspect-ratio: 16 / 9; /* 画像の表示比率。16:9に固定する */
  object-fit: cover; /* 画像を表示領域いっぱいに収める */
}

/* サムネイル画像 */
.thumbnail-tab-switch_thumbnail {
  display: block; /* 画像下部の余分な隙間をなくす */
  width: 100%; /* ボタンの横幅いっぱいに広げる */
  aspect-ratio: 4 / 3; /* サムネイルの表示比率 */
  border-radius: 6px; /* サムネイル画像の角丸 */
  object-fit: cover; /* 画像を表示領域いっぱいに収める */
}

レスポンシブ対応
style.cssでは、タブ全体の最大横幅を680pxに設定しています。画面幅が狭い場合は親要素に合わせて縮小されます。サムネイルは通常4列ですが、画面幅640px以下では2列になります。

/* サムネイルの並び */
.thumbnail-tab-switch_tabs {
  display: grid; /* サムネイルを格子状に配置する */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PCでは4列に配置する */
  gap: 12px; /* サムネイル同士の間隔 */
}

@media (max-width: 640px) {

  /* サムネイルを2列にする */
  .thumbnail-tab-switch_tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列表示 */
    gap: 10px; /* サムネイル同士の間隔 */
  }

}

grid-template-columnsのrepeat(4, ...)や repeat(2, ...)の数値を変更すると、各画面幅での列数を調整できます。 gapを大きくするとサムネイル同士の間隔が広がり、小さくすると狭くなります。また、640pxを変更すると2列表示へ切り替わる画面幅を調整できます。