横スクロールするタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

横スクロールするタブ切り替えを作る方法

タブの数が多い場合、すべてのタブを横一列へ並べると、スマートフォンなど画面幅の狭い環境ではタブが収まりきらないことがあります。このサンプルでは、コンテンツ全体を横スクロールさせるのではなく、上部に並ぶタブ部分だけを左右へ横スクロールできるタブ切り替えを作成します。横幅に収まらないタブを折り返さず一列に並べたまま、必要なタブをスクロールして選択できます。

「概要」「特徴」「使い方」「サンプル」「応用」「まとめ」の6つのタブを横一列に配置し、タブ部分だけを左右へスクロールできるようにします。タブの下にあるコンテンツ部分は横スクロールせず、選択したタブに対応する内容だけが同じ位置へ表示されます。たとえば右側に隠れている「応用」や「まとめ」を表示したい場合は、タブ部分を横へスクロールしてから目的のタブをクリックします。

HTMLで6つのタブと対応するコンテンツを作成し、CSSではタブを囲むエリアへoverflow-x:autoを設定して、タブ部分だけに横スクロールを発生させます。JavaScriptではクリックされたタブに合わせてis-activeクラスとaria-selectedを切り替え、下のコンテンツを変更します。画面幅640px以下でもタブを折り返さず、タブ部分だけを横スクロールして選択できる構成です。

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

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

デモ

タブ部分だけを横スクロール

上のタブだけを左右へスクロールできます。下のコンテンツ部分は横スクロールしません。

← タブ部分を左右へ横スクロールできます →

概要

上部のタブ部分だけを横スクロールできるタブ切り替えです。下のコンテンツ部分はスクロールせず、選択したタブに対応する内容へ切り替わります。

特徴

横幅に収まらないタブを折り返さず一列に並べ、タブ部分だけを左右へスクロールできます。

使い方

タブ部分を左右へスクロールして目的のタブを表示し、クリックすると対応するコンテンツへ切り替わります。

サンプル

タブの数が多いメニューやカテゴリーなどを、限られた横幅の中へ一列で配置したい場合に利用できます。

応用

タブ名や表示内容を変更することで、商品情報やサービス案内など、項目数の多いタブ切り替えにも利用できます。

まとめ

タブ部分だけを横スクロールさせることで、コンテンツの表示幅を保ちながら多くのタブを一列に配置できます。

横スクロールするのは上部のタブ部分だけです。タブを選択すると、下のコンテンツが対応する内容へ切り替わります。

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

<!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="horizontal-scroll-tabs_wrap">

    <!-- タイトル -->
    <div class="horizontal-scroll-tabs_title">
      横スクロールするタブ切り替え
    </div>

    <!-- 説明文 -->
    <p class="horizontal-scroll-tabs_text">
      タブ部分を左右へスクロールして、表示したい内容を選択できます。
    </p>

    <!-- タブ部分だけを横スクロールさせるエリア -->
    <div class="horizontal-scroll-tabs_scroller">

      <!-- タブ一覧 -->
      <div
        class="horizontal-scroll-tabs_tabs"
        role="tablist"
        aria-label="表示内容">

        <!-- 概要タブ -->
        <button
          class="horizontal-scroll-tabs_tab is-active"
          id="horizontal-scroll-tabs-overview"
          type="button"
          role="tab"
          aria-controls="horizontal-scroll-tabs-panel-overview"
          aria-selected="true"
          data-tab="overview">
          概要
        </button>

        <!-- 特徴タブ -->
        <button
          class="horizontal-scroll-tabs_tab"
          id="horizontal-scroll-tabs-feature"
          type="button"
          role="tab"
          aria-controls="horizontal-scroll-tabs-panel-feature"
          aria-selected="false"
          data-tab="feature">
          特徴
        </button>

        <!-- 使い方タブ -->
        <button
          class="horizontal-scroll-tabs_tab"
          id="horizontal-scroll-tabs-usage"
          type="button"
          role="tab"
          aria-controls="horizontal-scroll-tabs-panel-usage"
          aria-selected="false"
          data-tab="usage">
          使い方
        </button>

        <!-- サンプルタブ -->
        <button
          class="horizontal-scroll-tabs_tab"
          id="horizontal-scroll-tabs-sample"
          type="button"
          role="tab"
          aria-controls="horizontal-scroll-tabs-panel-sample"
          aria-selected="false"
          data-tab="sample">
          サンプル
        </button>

        <!-- 応用タブ -->
        <button
          class="horizontal-scroll-tabs_tab"
          id="horizontal-scroll-tabs-advanced"
          type="button"
          role="tab"
          aria-controls="horizontal-scroll-tabs-panel-advanced"
          aria-selected="false"
          data-tab="advanced">
          応用
        </button>

        <!-- まとめタブ -->
        <button
          class="horizontal-scroll-tabs_tab"
          id="horizontal-scroll-tabs-summary"
          type="button"
          role="tab"
          aria-controls="horizontal-scroll-tabs-panel-summary"
          aria-selected="false"
          data-tab="summary">
          まとめ
        </button>

      </div>

    </div>

    <!-- 概要コンテンツ -->
    <div
      class="horizontal-scroll-tabs_panel is-active"
      id="horizontal-scroll-tabs-panel-overview"
      role="tabpanel"
      aria-labelledby="horizontal-scroll-tabs-overview"
      data-panel="overview">

      <!-- コンテンツタイトル -->
      <div class="horizontal-scroll-tabs_panel-title">
        概要
      </div>

      <!-- コンテンツ本文 -->
      <p class="horizontal-scroll-tabs_panel-text">
        タブ部分だけを横スクロールできるタブ切り替えです。
      </p>

    </div>

    <!-- 特徴コンテンツ -->
    <div
      class="horizontal-scroll-tabs_panel"
      id="horizontal-scroll-tabs-panel-feature"
      role="tabpanel"
      aria-labelledby="horizontal-scroll-tabs-feature"
      data-panel="feature">

      <!-- コンテンツタイトル -->
      <div class="horizontal-scroll-tabs_panel-title">
        特徴
      </div>

      <!-- コンテンツ本文 -->
      <p class="horizontal-scroll-tabs_panel-text">
        横幅に収まらないタブを折り返さず、一列のまま表示できます。
      </p>

    </div>

    <!-- 使い方コンテンツ -->
    <div
      class="horizontal-scroll-tabs_panel"
      id="horizontal-scroll-tabs-panel-usage"
      role="tabpanel"
      aria-labelledby="horizontal-scroll-tabs-usage"
      data-panel="usage">

      <!-- コンテンツタイトル -->
      <div class="horizontal-scroll-tabs_panel-title">
        使い方
      </div>

      <!-- コンテンツ本文 -->
      <p class="horizontal-scroll-tabs_panel-text">
        タブを左右へスクロールし、目的のタブをクリックして内容を切り替えます。
      </p>

    </div>

    <!-- サンプルコンテンツ -->
    <div
      class="horizontal-scroll-tabs_panel"
      id="horizontal-scroll-tabs-panel-sample"
      role="tabpanel"
      aria-labelledby="horizontal-scroll-tabs-sample"
      data-panel="sample">

      <!-- コンテンツタイトル -->
      <div class="horizontal-scroll-tabs_panel-title">
        サンプル
      </div>

      <!-- コンテンツ本文 -->
      <p class="horizontal-scroll-tabs_panel-text">
        項目数が多いメニューやカテゴリー切り替えなどに利用できます。
      </p>

    </div>

    <!-- 応用コンテンツ -->
    <div
      class="horizontal-scroll-tabs_panel"
      id="horizontal-scroll-tabs-panel-advanced"
      role="tabpanel"
      aria-labelledby="horizontal-scroll-tabs-advanced"
      data-panel="advanced">

      <!-- コンテンツタイトル -->
      <div class="horizontal-scroll-tabs_panel-title">
        応用
      </div>

      <!-- コンテンツ本文 -->
      <p class="horizontal-scroll-tabs_panel-text">
        タブ名や表示内容を変更して、商品情報やサービス案内などにも利用できます。
      </p>

    </div>

    <!-- まとめコンテンツ -->
    <div
      class="horizontal-scroll-tabs_panel"
      id="horizontal-scroll-tabs-panel-summary"
      role="tabpanel"
      aria-labelledby="horizontal-scroll-tabs-summary"
      data-panel="summary">

      <!-- コンテンツタイトル -->
      <div class="horizontal-scroll-tabs_panel-title">
        まとめ
      </div>

      <!-- コンテンツ本文 -->
      <p class="horizontal-scroll-tabs_panel-text">
        多くのタブを一列に保ったまま、限られた横幅の中で選択できます。
      </p>

    </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; /* ページ全体で使用するフォント */
}

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

/* タイトル */
.horizontal-scroll-tabs_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.horizontal-scroll-tabs_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくするとタブとの間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ部分だけを横スクロールさせるエリア */
.horizontal-scroll-tabs_scroller{
  width:100%; /* 親要素の横幅いっぱいに表示 */
  overflow-x:auto; /* 横幅を超えたタブ部分だけを左右へスクロールできるようにする */
  overflow-y:hidden; /* 縦方向のスクロールを表示しない */
  -webkit-overflow-scrolling:touch; /* 対応環境でタッチスクロールを滑らかにする */
}

/* タブ一覧 */
.horizontal-scroll-tabs_tabs{
  display:flex; /* タブを横方向へ並べる */
  width:max-content; /* タブ全体の横幅を確保して横スクロールを発生させる */
  min-width:100%; /* タブが少ない場合でも親要素の横幅まで広げる */
  border-bottom:1px solid #d1d5db; /* タブ一覧の下側の枠線 */
}

/* 各タブ */
.horizontal-scroll-tabs_tab{
  flex:0 0 auto; /* タブを縮めず横一列に並べる */
  min-width:120px; /* 最小横幅。値を大きくすると各タブが横に広がる */
  min-height:52px; /* 最小高さ。値を大きくするとタブが高くなる */
  padding:14px 18px; /* 上下14px・左右18px。値を大きくすると内側余白が広がる */
  border:1px solid #d1d5db; /* タブを囲む枠線 */
  border-bottom:none; /* タブ下側の枠線を非表示 */
  border-radius:12px 12px 0 0; /* 上側12pxの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 通常時のタブ背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* タブの文字サイズ */
  font-weight:700; /* タブ文字を太字にする */
  line-height:1.5; /* タブ文字の行間 */
  white-space:nowrap; /* タブ名を途中で折り返さない */
  cursor:pointer; /* マウスを重ねたときにポインターを表示 */
  transition:
    background-color .3s ease,
    color .3s ease;
  /*
    背景色と文字色を0.3秒で切り替える。
    値を大きくするとゆっくり、小さくすると速く切り替わる。
  */
}

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

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

/* キーボード操作時のフォーカス */
.horizontal-scroll-tabs_tab:focus-visible{
  position:relative; /* フォーカス枠を前面へ表示するための基準 */
  z-index:1; /* 他のタブより前面へ表示 */
  outline:3px solid rgba(11,107,255,.22); /* フォーカス枠。3pxを大きくすると太くなる */
  outline-offset:2px; /* タブとフォーカス枠の間隔。値を大きくすると離れる */
}

/* 各コンテンツ */
.horizontal-scroll-tabs_panel{
  display:none; /* 選択されていないコンテンツを非表示 */
  min-height:190px; /* 最小高さ。値を大きくすると表示領域が高くなる */
  padding:24px; /* 内側の余白。値を大きくすると文章と枠線の間隔が広がる */
  border:1px solid #d1d5db; /* コンテンツを囲む枠線 */
  border-top:none; /* タブ一覧との境界部分の上側枠線を非表示 */
  background:#ffffff; /* コンテンツの背景色 */
  color:#4b5563; /* 本文の文字色 */
  font-size:16px; /* 本文の文字サイズ */
  line-height:1.8; /* 本文の行間 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 選択中のコンテンツ */
.horizontal-scroll-tabs_panel.is-active{
  display:block; /* 選択中のコンテンツだけを表示 */
}

/* コンテンツ内のタイトル */
.horizontal-scroll-tabs_panel-title{
  margin:0 0 10px; /* 下側10pxの余白。値を大きくすると本文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:18px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
}

/* コンテンツ内の文章 */
.horizontal-scroll-tabs_panel-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
}

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

  /* タブ切り替え全体 */
  .horizontal-scroll-tabs_wrap{
    padding:24px 18px; /* スマートフォン時の内側余白 */
  }

  /* 各タブ */
  .horizontal-scroll-tabs_tab{
    min-width:110px; /* スマートフォン時の最小横幅 */
    min-height:48px; /* スマートフォン時の最小高さ */
    padding:12px 16px; /* スマートフォン時の内側余白 */
    font-size:14px; /* スマートフォン時の文字サイズ */
  }

  /* 2つ目以降のタブ */
  .horizontal-scroll-tabs_tab + .horizontal-scroll-tabs_tab{
    margin-left:4px; /* スマートフォン時のタブ間隔 */
  }

  /* 各コンテンツ */
  .horizontal-scroll-tabs_panel{
    min-height:170px; /* スマートフォン時のコンテンツ最小高さ */
    padding:20px 16px; /* スマートフォン時の内側余白 */
  }

  /* コンテンツ内のタイトル */
  .horizontal-scroll-tabs_panel-title{
    font-size:17px; /* スマートフォン時のタイトル文字サイズ */
  }

}

// 横スクロールするタブをすべて取得
const horizontalScrollTabs =
  document.querySelectorAll(".horizontal-scroll-tabs_tab");

// タブに対応するコンテンツをすべて取得
const horizontalScrollPanels =
  document.querySelectorAll(".horizontal-scroll-tabs_panel");

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

  // タブがクリックされたときの処理
  tab.addEventListener("click",function(){

    // クリックしたタブのdata-tabから切り替え先を取得
    const target = tab.dataset.tab;

    // すべてのタブを非選択状態へ戻す
    horizontalScrollTabs.forEach(function(item){

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

    });

    // すべてのコンテンツを非表示にする
    horizontalScrollPanels.forEach(function(panel){

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

    });

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

    // クリックしたタブに対応するコンテンツを取得
    const targetPanel =
      document.querySelector(
        '.horizontal-scroll-tabs_panel[data-panel="' +
        target +
        '"]'
      );

    // 対応するコンテンツが存在する場合だけ表示
    if(targetPanel){

      targetPanel.classList.add("is-active");

    }

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは横一列に並ぶ6つのタブと、それぞれに対応するコンテンツを作成します。CSSではタブ部分へ横スクロールを設定し、タブの横幅が表示エリアに収まらない場合でも折り返さず一列のまま表示できるようにします。

JavaScriptではクリックされたタブのdata-tabを取得し、対応するdata-panelを持つコンテンツへ表示を切り替えます。横スクロールするのはタブ部分だけで、下に表示されるコンテンツ部分は横スクロールしません。外部ライブラリや外部サービス、APIなどは使用していないため、追加の設定情報を用意する必要はありません。

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

各ファイルの役割
index.htmlはタブ切り替え全体を構成するファイルです。「概要」「特徴」「使い方」「サンプル」「応用」「まとめ」のタブと、それぞれに対応するコンテンツを記述しています。タブ名やコンテンツのタイトル、本文を変更する場合は、このファイルを編集します。

style.cssはタブ切り替えのデザインと横スクロールを設定するファイルです。overflow-x:auto;によってタブ部分だけを横スクロールできるようにし、width:max-content;とflex:0 0 auto;によって各タブを縮めず横一列に配置します。全体の横幅、余白、背景色、枠線、角丸、タブサイズ、選択中の色、コンテンツ部分のサイズなどもこのファイルで変更できます。

script.jsはタブをクリックしたときに表示内容を切り替えるファイルです。クリックされたタブへis-activeクラスを付け、ほかのタブから取り除きます。同時にaria-selectedを更新し、クリックしたタブのdata-tabと一致するコンテンツだけへis-activeクラスを付けて表示します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルは同じ階層へ保存してください。index.htmlでは<link rel="stylesheet" href="style.css">でCSSを読み込み、ページ下部の<script src="script.js"></script>でJavaScriptを読み込む構成になっています。

ファイルを配置したあと、sample/index.htmlをブラウザで開いてください。タブが横一列に表示され、表示エリアに収まらない部分はタブ部分を左右へスクロールできます。目的のタブをクリックすると、タブの選択状態が変わり、その下に対応するコンテンツが表示されます。

カスタマイズできる内容
index.htmlでは、全体のタイトルと説明文、6つのタブ名、各タブに対応するコンテンツのタイトルと本文を変更できます。タブとコンテンツの対応関係は、タブ側のdata-tabとコンテンツ側のdata-panelで設定しているため、内容を変更する場合も対応する値を一致させてください。

style.cssでは、タブ切り替え全体の最大横幅や余白、背景色、枠線、角丸を変更できます。各タブの最小横幅・高さ・余白・文字サイズ・間隔や、選択中の背景色と文字色も調整できます。また、コンテンツ部分の最小高さ、余白、文字サイズ、背景色なども変更できます。

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

max-width:700px;
タブ切り替え全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

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

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

border-radius:18px;
タブ切り替え全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
全体タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとタブとの間隔が広がり、小さくすると狭くなります。

min-width:120px;
各タブの最小横幅です。値を大きくすると1つのタブが横に広がり、横スクロールが発生しやすくなります。小さくすると一度に表示できるタブ数が増えます。

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

padding:14px 18px;
各タブの内側余白です。14pxは上下、18pxは左右の余白を表します。値を大きくするとタブ内の余白が広がります。

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

font-size:16px;
タブの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

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

margin-left:6px;
タブ同士の間隔です。値を大きくするとタブ同士が離れ、小さくすると間隔が狭くなります。

outline:3px solid ...
キーボード操作でタブへフォーカスしたときの外枠の太さです。3pxを大きくするとフォーカス枠が太くなります。

outline-offset:2px;
タブとフォーカス枠の間隔です。値を大きくするとフォーカス枠がタブから離れます。

min-height:190px;
コンテンツ部分の最小高さです。値を大きくすると表示領域が高くなり、小さくすると低くなります。

padding:24px;
コンテンツ部分の内側余白です。値を大きくすると文章と枠線の間隔が広がり、小さくすると狭くなります。

font-size:18px;
コンテンツ内タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、タブ切り替え全体が画面幅に合わせて縮小します。タブ一覧は折り返さず、表示領域からはみ出したタブだけを横スクロールして選択できるため、横幅の狭い画面でもコンテンツ部分まで横スクロールする必要はありません。

画面幅640px以下では、全体の余白をpadding:24px 18px;へ変更します。各タブはmin-width:110px;、min-height:48px;、padding:12px 16px;、font-size:14px;へ変更し、タブ間隔も4pxへ縮小します。コンテンツ部分は最小高さ170px、余白20px 16px、タイトル17pxへ調整されるため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。