タブで画像を切り替える方法【HTML/CSS/JavaScript・サンプルコード付き】

タブで画像を切り替える方法

タブで画像を切り替える方法を紹介します。このサンプルでは、複数のタブをクリックすると、選択したタブに対応する画像へ表示内容が切り替わります。画像をすべて並べて表示する必要がないため、限られたスペースの中で複数の写真やイメージを整理して見せたい場合に利用できます。

商品のカラーごとの画像、場所ごとの写真、制作実績、施設案内、カテゴリー別のイメージなど、項目ごとに異なる画像を見せたい場面に適しています。現在選択しているタブは青色で表示されるため、どの画像を表示しているのかも分かりやすく確認できます。JavaScriptではクリックされたタブの番号を取得し、対応する画像だけを表示します。

HTMLではタブ名や表示する画像を変更でき、CSSではタブの色、余白、角丸、画像の高さ、枠線、影などを調整できます。画像部分は画面幅に合わせて縮小し、スマートフォンでは画像の高さも調整するため、スマートフォン・タブレット・PCで利用できます。シンプルなタブ切り替えと画像表示を組み合わせたい場合に使いやすいサンプルです。

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

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

デモ

画像をタブで切り替える

タブをクリックすると、対応する画像へ切り替わります。

「川の景色」「丘の景色」「雪の景色」のタブをクリックすると、対応する画像へ切り替わります。

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

<!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="tab-image-switch_wrap">

    <!-- タイトル -->
    <div class="tab-image-switch_title">
      タブで画像を切り替える
    </div>

    <!-- 説明文 -->
    <p class="tab-image-switch_text">
      タブをクリックすると、対応する画像へ切り替わります。
    </p>

    <!-- タブ一覧 -->
    <div class="tab-image-switch_tabs" role="tablist" aria-label="画像切り替え">

      <!-- 画像1タブ -->
      <button
        class="tab-image-switch_tab is-active"
        id="tab-image-switch-tab1"
        type="button"
        role="tab"
        aria-controls="tab-image-switch-panel1"
        aria-selected="true"
        data-tab="image1">
        画像1
      </button>

      <!-- 画像2タブ -->
      <button
        class="tab-image-switch_tab"
        id="tab-image-switch-tab2"
        type="button"
        role="tab"
        aria-controls="tab-image-switch-panel2"
        aria-selected="false"
        data-tab="image2">
        画像2
      </button>

      <!-- 画像3タブ -->
      <button
        class="tab-image-switch_tab"
        id="tab-image-switch-tab3"
        type="button"
        role="tab"
        aria-controls="tab-image-switch-panel3"
        aria-selected="false"
        data-tab="image3">
        画像3
      </button>

    </div>

    <!-- 画像1 -->
    <div
      class="tab-image-switch_panel is-active"
      id="tab-image-switch-panel1"
      role="tabpanel"
      aria-labelledby="tab-image-switch-tab1"
      data-panel="image1">

      <img
        class="tab-image-switch_image"
        src="images/image1.png"
        alt="画像1">

    </div>

    <!-- 画像2 -->
    <div
      class="tab-image-switch_panel"
      id="tab-image-switch-panel2"
      role="tabpanel"
      aria-labelledby="tab-image-switch-tab2"
      data-panel="image2">

      <img
        class="tab-image-switch_image"
        src="images/image2.png"
        alt="画像2">

    </div>

    <!-- 画像3 -->
    <div
      class="tab-image-switch_panel"
      id="tab-image-switch-panel3"
      role="tabpanel"
      aria-labelledby="tab-image-switch-tab3"
      data-panel="image3">

      <img
        class="tab-image-switch_image"
        src="images/image3.png"
        alt="画像3">

    </div>

  </div>

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

</body>
</html>

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

/* 画像タブ切り替え全体と内部要素 */
.tab-image-switch_wrap,
.tab-image-switch_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 画像タブ切り替え全体 */
.tab-image-switch_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容との間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
}

/* タイトル */
.tab-image-switch_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.tab-image-switch_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ一覧 */
.tab-image-switch_tabs{
  display:flex; /* タブを横並びにする */
  border-bottom:1px solid #d1d5db; /* タブ下部の境界線 */
}

/* タブ */
.tab-image-switch_tab{
  flex:1; /* 各タブを同じ横幅にする */
  min-height:52px; /* タブの最小高さ */
  padding:14px; /* タブ内側の余白 */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* 下側の枠線を非表示 */
  border-radius:12px 12px 0 0; /* 上側だけ角丸にする */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* タブの文字サイズ */
  font-weight:700; /* タブの文字を太字にする */
  cursor:pointer; /* マウスを重ねた時にポインターを表示 */
  transition:
    background-color .3s ease,
    color .3s ease;
  /*
    0.3秒で背景色と文字色を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* 2つ目以降のタブ */
.tab-image-switch_tab + .tab-image-switch_tab{
  margin-left:6px; /* タブ同士の間隔。値を大きくすると広がる */
}

/* 選択中のタブ */
.tab-image-switch_tab.is-active{
  background:#0b6bff; /* 選択中の背景色 */
  color:#ffffff; /* 選択中の文字色 */
}

/* キーボード操作時のフォーカス表示 */
.tab-image-switch_tab:focus-visible{
  position:relative; /* フォーカス枠を前面へ表示するための基準 */
  z-index:1; /* 隣のタブより前面へ表示 */
  outline:3px solid rgba(11,107,255,.22); /* フォーカス時の外枠 */
  outline-offset:2px; /* 外枠とタブとの間隔 */
}

/* 画像パネル */
.tab-image-switch_panel{
  display:none; /* 通常時は非表示 */
  overflow:hidden; /* 画像のはみ出しを防ぐ */
  border:1px solid #d1d5db; /* 画像パネルの枠線 */
  border-top:none; /* タブとの境界部分の枠線を削除 */
  background:#ffffff; /* パネルの背景色 */
}

/* 選択中の画像パネル */
.tab-image-switch_panel.is-active{
  display:block; /* 選択中の画像だけ表示 */
}

/* 表示画像 */
.tab-image-switch_image{
  display:block; /* 画像下の不要な隙間を防ぐ */
  width:100%; /* 横幅いっぱいに表示 */
  height:400px; /* 画像の高さ。値を大きくすると縦に高くなる */
  object-fit:cover; /* 表示エリアを埋めるように画像を切り抜いて表示 */
}

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

  /* 画像タブ切り替え全体 */
  .tab-image-switch_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* タブ */
  .tab-image-switch_tab{
    min-height:48px; /* スマートフォンでのタブの最小高さ */
    padding:12px 8px; /* スマートフォンでのタブ内側余白 */
    font-size:14px; /* スマートフォンでの文字サイズ */
  }

  /* 2つ目以降のタブ */
  .tab-image-switch_tab + .tab-image-switch_tab{
    margin-left:4px; /* スマートフォンではタブ間隔を小さくする */
  }

  /* 表示画像 */
  .tab-image-switch_image{
    height:260px; /* スマートフォンでは画像の高さを小さくする */
  }

}

// すべてのタブを取得
const tabImageSwitchTabs=
  document.querySelectorAll(".tab-image-switch_tab");

// すべての画像パネルを取得
const tabImageSwitchPanels=
  document.querySelectorAll(".tab-image-switch_panel");

// 各タブへクリック処理を設定
tabImageSwitchTabs.forEach(function(tab){

  // タブをクリックした時の処理
  tab.addEventListener("click",function(){

    // クリックしたタブに対応する値を取得
    const target=tab.dataset.tab;

    // すべてのタブを非選択状態にする
    tabImageSwitchTabs.forEach(function(item){

      item.classList.remove("is-active");
      item.setAttribute("aria-selected","false");

    });

    // すべての画像パネルを非表示にする
    tabImageSwitchPanels.forEach(function(panel){

      panel.classList.remove("is-active");

    });

    // クリックしたタブを選択状態にする
    tab.classList.add("is-active");
    tab.setAttribute("aria-selected","true");

    // 対応する画像パネルを表示
    document
      .querySelector('[data-panel="' + target + '"]')
      .classList.add("is-active");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、表示する3枚の画像で構成されています。HTMLでは3つのタブと、それぞれのタブに対応する画像を配置します。CSSではタブや画像表示エリアのデザインを設定し、JavaScriptではクリックされたタブに対応する画像へ表示を切り替えます。

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

各ファイルの役割
index.htmlはタブと画像を構成するファイルです。「川の景色」「丘の景色」「雪の景色」のタブと、それぞれに対応する画像を設定します。タブの文字や画像ファイル名、画像の代替テキストを変更できます。

style.cssはタブと画像表示エリアの見た目を設定するファイルです。全体の横幅や余白、タブの背景色・文字色・枠線・角丸、画像のサイズなどを変更できます。選択中のタブには専用のスタイルが適用され、現在表示している画像を確認しやすくなっています。

script.jsはタブをクリックしたときの切り替え処理を行うファイルです。クリックされたタブを選択状態に変更し、そのタブに対応する画像だけを表示します。

imagesフォルダには、タブで切り替えて表示する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngの3枚を使用します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中にimagesフォルダを作成してください。imagesフォルダには、表示したい画像をimage1.png、image2.png、image3.pngのファイル名で配置します。画像を自分で用意する場合は、HTMLに記載しているファイル名と実際の画像ファイル名を一致させてください。

ファイルを配置したあと、sample/index.htmlをブラウザで開きます。「川の景色」「丘の景色」「雪の景色」の各タブをクリックすると、選択したタブに対応する画像へ切り替わります。

カスタマイズできる内容
index.htmlでは、タブに表示する「川の景色」「丘の景色」「雪の景色」の文字を変更できます。また、src="images/image1.png"などの画像ファイル名を変更することで、任意の画像を表示できます。画像を変更する場合は、対応するaltの文章も画像内容に合わせて変更してください。

style.cssでは、タブの背景色・文字色・枠線・角丸・高さ・余白や、画像表示エリアの横幅、画像の高さなどを変更できます。選択中のタブに設定されている色を変更すれば、サイトのデザインに合わせたタブへ調整できます。

数値調整
style.css
max-width:700px;
タブと画像を含む全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外側の間隔が広がり、小さくすると狭くなります。

min-height:52px;
タブの最小の高さです。値を大きくするとタブが高くなり、小さくすると低くなります。

padding:14px;
タブの内側余白です。値を大きくするとタブ内の余白が広がります。

border-radius:12px 12px 0 0;
タブ上部の角丸です。12pxを大きくすると丸みが強くなり、0にすると四角になります。

margin-left:6px;
隣り合うタブ同士の間隔です。値を大きくするとタブの間隔が広がります。

transition:0.3s;
タブの背景色と文字色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせて全体が縮小されます。画像もwidth:100%で表示するため、親要素の横幅に合わせてサイズが調整されます。さらに640px以下では全体の余白やタブの高さ、文字サイズなどを小さくしているため、スマートフォン・タブレット・PCで利用できます。