縦型タブ切り替え（左タブ版）を作る方法【HTML/CSS/JavaScript・サンプルコード付き】

縦型タブ切り替え（左タブ版）を作る方法

タブ切り替えは、複数の情報を同じ表示エリアにまとめ、選択したタブに対応する内容だけを表示できるUIです。このサンプルでは、タブを左側へ縦方向に配置し、クリックしたタブに対応するコンテンツを右側へ表示する縦型のタブ切り替えを作成します。

「プロフィール」「サービス」「お問い合わせ」の3つのタブを用意し、タブをクリックすると選択中のタブが青色に変わり、右側の表示内容も同時に切り替わります。会社案内やサービス紹介、商品情報、設定画面など、複数の内容を限られたスペースへ整理して表示したい場合に活用できます。

HTMLでタブと対応するコンテンツを作成し、CSSのFlexboxを使って「左側にタブ・右側にコンテンツ」のレイアウトを構成します。JavaScriptではクリックされたタブに合わせてis-activeクラスとaria-selectedを切り替えます。画面幅640px以下ではタブの横幅や文字サイズ、コンテンツの余白などを調整し、スマートフォンでも左側にタブを配置した状態で利用できるようにしています。

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

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

デモ

縦型タブ切り替え（左タブ版）

左側のタブをクリックすると、右側のコンテンツへ切り替わります。

プロフィール

プロフィール情報を表示するエリアです。自己紹介や担当内容などを整理して表示できます。

サービス

サービス内容を表示するエリアです。料金、特徴、対応内容などを分けて見せたい場合に便利です。

お問い合わせ

お問い合わせ情報を表示するエリアです。連絡先や受付時間などをまとめて表示できます。

プロフィール・サービス・お問い合わせの各タブをクリックすると、右側の対応する内容へ切り替わります。

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

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

<head>

  <!-- 文字コードをUTF-8に設定する -->
  <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="vertical-tab-switch-left_wrap">

    <!-- タイトル -->
    <div class="vertical-tab-switch-left_title">
      縦型タブ切り替え（左タブ版）
    </div>

    <!-- 説明文 -->
    <p class="vertical-tab-switch-left_text">
      左側のタブをクリックすると、右側のコンテンツへ切り替わります。
    </p>

    <!-- タブとコンテンツを横並びにするエリア -->
    <div class="vertical-tab-switch-left_layout">

      <!-- 左側のタブエリア -->
      <div
        class="vertical-tab-switch-left_tabs"
        role="tablist"
        aria-label="表示内容">

        <!-- プロフィールタブ -->
        <button
          class="vertical-tab-switch-left_tab is-active"
          id="vertical-tab-switch-left-profile"
          type="button"
          role="tab"
          aria-controls="vertical-tab-switch-left-panel-profile"
          aria-selected="true"
          data-tab="profile">
          プロフィール
        </button>

        <!-- サービスタブ -->
        <button
          class="vertical-tab-switch-left_tab"
          id="vertical-tab-switch-left-service"
          type="button"
          role="tab"
          aria-controls="vertical-tab-switch-left-panel-service"
          aria-selected="false"
          data-tab="service">
          サービス
        </button>

        <!-- お問い合わせタブ -->
        <button
          class="vertical-tab-switch-left_tab"
          id="vertical-tab-switch-left-contact"
          type="button"
          role="tab"
          aria-controls="vertical-tab-switch-left-panel-contact"
          aria-selected="false"
          data-tab="contact">
          お問い合わせ
        </button>

      </div>

      <!-- 右側のコンテンツエリア -->
      <div class="vertical-tab-switch-left_contents">

        <!-- プロフィールパネル -->
        <div
          class="vertical-tab-switch-left_panel is-active"
          id="vertical-tab-switch-left-panel-profile"
          role="tabpanel"
          aria-labelledby="vertical-tab-switch-left-profile"
          data-panel="profile">

          <!-- パネルタイトル -->
          <div class="vertical-tab-switch-left_panel-title">
            プロフィール
          </div>

          <!-- パネル本文 -->
          <p class="vertical-tab-switch-left_panel-text">
            プロフィール情報を表示するエリアです。自己紹介や担当内容などを整理して表示できます。
          </p>

        </div>

        <!-- サービスパネル -->
        <div
          class="vertical-tab-switch-left_panel"
          id="vertical-tab-switch-left-panel-service"
          role="tabpanel"
          aria-labelledby="vertical-tab-switch-left-service"
          data-panel="service">

          <!-- パネルタイトル -->
          <div class="vertical-tab-switch-left_panel-title">
            サービス
          </div>

          <!-- パネル本文 -->
          <p class="vertical-tab-switch-left_panel-text">
            サービス内容を表示するエリアです。料金、特徴、対応内容などを分けて見せたい場合に便利です。
          </p>

        </div>

        <!-- お問い合わせパネル -->
        <div
          class="vertical-tab-switch-left_panel"
          id="vertical-tab-switch-left-panel-contact"
          role="tabpanel"
          aria-labelledby="vertical-tab-switch-left-contact"
          data-panel="contact">

          <!-- パネルタイトル -->
          <div class="vertical-tab-switch-left_panel-title">
            お問い合わせ
          </div>

          <!-- パネル本文 -->
          <p class="vertical-tab-switch-left_panel-text">
            お問い合わせ情報を表示するエリアです。連絡先や受付時間などをまとめて表示できます。
          </p>

        </div>

      </div>

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

/* 縦型タブ切り替え内のすべての要素 */
.vertical-tab-switch-left_wrap,
.vertical-tab-switch-left_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅・高さへ含める */
}

/* =========================================
   タブ切り替え全体
========================================= */

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

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

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

/* =========================================
   左側タブ・右側コンテンツ
========================================= */

/* タブとコンテンツを横並びにするエリア */
.vertical-tab-switch-left_layout{
  display:flex; /* 左側タブと右側コンテンツを横並びにする */
  align-items:stretch; /* 左右の要素を高さ方向へ揃える */
}

/* =========================================
   左側タブ
========================================= */

/* 左側のタブエリア */
.vertical-tab-switch-left_tabs{
  display:flex; /* タブをFlexboxで配置する */
  flex:0 0 180px; /* タブエリアを180px幅にする。値を大きくすると横幅が広がる */
  flex-direction:column; /* タブを縦方向に並べる */
  border-right:1px solid #d1d5db; /* コンテンツとの境界線 */
}

/* 各タブボタン */
.vertical-tab-switch-left_tab{
  flex:1; /* 3つのタブの高さを均等にする */
  min-height:64px; /* タブの最小高さ。値を大きくすると高くなる */
  padding:14px; /* タブ内側の余白 */
  border:1px solid #d1d5db; /* タブを囲む枠線 */
  border-right:none; /* コンテンツ側と重なる右枠線を削除する */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* 親要素と同じフォントを使用する */
  font-size:16px; /* タブの文字サイズ */
  font-weight:700; /* タブ文字を太字にする */
  line-height:1.5; /* タブ文字の行間 */
  text-align:left; /* タブ文字を左揃えにする */
  cursor:pointer; /* マウスカーソルを指型にする */
  transition:
    background-color .3s ease,
    color .3s ease; /* 0.3秒で背景色と文字色を切り替える */
}

/* 最初のタブ */
.vertical-tab-switch-left_tab:first-child{
  border-radius:12px 0 0 0; /* 左上だけ12pxの角丸にする */
}

/* 最後のタブ */
.vertical-tab-switch-left_tab:last-child{
  border-radius:0 0 0 12px; /* 左下だけ12pxの角丸にする */
}

/* 2つ目以降のタブ */
.vertical-tab-switch-left_tab + .vertical-tab-switch-left_tab{
  border-top:none; /* タブ同士の境界線が重ならないようにする */
}

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

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

/* =========================================
   右側コンテンツ
========================================= */

/* 右側のコンテンツエリア */
.vertical-tab-switch-left_contents{
  flex:1; /* 左側タブ以外の横幅を使用する */
  min-width:0; /* 狭い画面でもコンテンツがはみ出さないようにする */
}

/* 各コンテンツパネル */
.vertical-tab-switch-left_panel{
  display:none; /* 初期状態では非表示にする */
  min-height:210px; /* パネルの最小高さ。値を大きくすると高くなる */
  padding:24px; /* パネル内側の余白 */
  border:1px solid #d1d5db; /* パネルを囲む枠線 */
  border-left:none; /* 左側タブとの境界部分の枠線を削除する */
  border-radius:0 12px 12px 0; /* 右上・右下だけ角丸にする */
  background:#ffffff; /* パネルの背景色 */
  color:#4b5563; /* パネル本文の文字色 */
  font-size:16px; /* パネル本文の文字サイズ */
  line-height:1.8; /* パネル本文の行間 */
}

/* 選択中のコンテンツパネル */
.vertical-tab-switch-left_panel.is-active{
  display:block; /* 選択中のパネルだけ表示する */
}

/* パネル内のタイトル */
.vertical-tab-switch-left_panel-title{
  margin:0 0 10px; /* 下側10pxの余白 */
  color:#111827; /* パネルタイトルの文字色 */
  font-size:18px; /* パネルタイトルの文字サイズ */
  font-weight:700; /* パネルタイトルを太字にする */
  line-height:1.5; /* パネルタイトルの行間 */
}

/* パネル内の本文 */
.vertical-tab-switch-left_panel-text{
  margin:0; /* ブラウザ標準の外側余白を削除する */
}

/* =========================================
   レスポンシブ対応
========================================= */

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

  /* タブ切り替え全体 */
  .vertical-tab-switch-left_wrap{
    padding:24px 18px; /* 小さい画面では内側余白を縮小する */
  }

  /* 左側のタブエリア */
  .vertical-tab-switch-left_tabs{
    flex-basis:120px; /* 小さい画面ではタブエリアを120px幅にする */
  }

  /* 各タブボタン */
  .vertical-tab-switch-left_tab{
    min-height:58px; /* 小さい画面では最小高さを58pxにする */
    padding:12px 8px; /* 小さい画面向けに内側余白を縮小する */
    font-size:14px; /* 小さい画面では文字サイズを14pxにする */
  }

  /* 各コンテンツパネル */
  .vertical-tab-switch-left_panel{
    min-height:190px; /* 小さい画面では最小高さを190pxにする */
    padding:20px 16px; /* 小さい画面向けに内側余白を縮小する */
  }

  /* パネル内のタイトル */
  .vertical-tab-switch-left_panel-title{
    font-size:17px; /* 小さい画面ではタイトルを17pxにする */
  }

}

// =========================================
// タブ切り替えで使用する要素を取得
// =========================================

// 左側のタブボタンをすべて取得
const verticalTabSwitchLeftTabs=
  document.querySelectorAll(
    ".vertical-tab-switch-left_tab"
  );

// 右側のコンテンツパネルをすべて取得
const verticalTabSwitchLeftPanels=
  document.querySelectorAll(
    ".vertical-tab-switch-left_panel"
  );

// =========================================
// タブを切り替える処理
// =========================================

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

  // タブボタンをクリックしたとき
  tab.addEventListener("click",function(){

    // クリックされたタブに対応する名前を取得
    const target=tab.dataset.tab;

    // すべてのタブボタンを未選択状態へ変更
    verticalTabSwitchLeftTabs.forEach(function(item){

      // 選択中クラスを削除
      item.classList.remove("is-active");

      // 支援技術へ未選択状態を伝える
      item.setAttribute(
        "aria-selected",
        "false"
      );

    });

    // すべてのコンテンツパネルを非表示状態へ変更
    verticalTabSwitchLeftPanels.forEach(function(panel){

      // 表示用クラスを削除
      panel.classList.remove("is-active");

    });

    // クリックされたタブを選択状態へ変更
    tab.classList.add("is-active");

    // 支援技術へ選択状態を伝える
    tab.setAttribute(
      "aria-selected",
      "true"
    );

    // クリックされたタブに対応するパネルを取得
    const targetPanel=
      document.querySelector(
        '.vertical-tab-switch-left_panel[data-panel="' +
        target +
        '"]'
      );

    // 対応するコンテンツパネルを表示
    targetPanel.classList.add("is-active");

  });

});

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで「プロフィール」「サービス」「お問い合わせ」の3つのタブと、それぞれに対応するコンテンツを作成し、CSSのFlexboxを使って左側に縦並びのタブ、右側にコンテンツを配置します。JavaScriptでは、クリックされたタブに合わせて表示するコンテンツを切り替えます。

初期状態では「プロフィール」タブが選択され、対応するプロフィール内容が右側へ表示されます。「サービス」や「お問い合わせ」をクリックすると、選択中のタブへis-activeクラスが移動し、右側のコンテンツも対応する内容へ切り替わります。タブの選択状態はaria-selectedにも反映する構成です。

外部ライブラリ、外部サービス、画像などは使用していません。APIキーや外部URLなど、利用者自身で取得・設定する情報もないため、3つのファイルを同じフォルダへ配置すればそのまま動作を確認できます。

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

各ファイルの役割
index.htmlは、縦型タブ切り替えの構造を作るファイルです。タイトル、説明文、「プロフィール」「サービス」「お問い合わせ」のタブボタン、各タブに対応するタイトルと本文が記述されています。タブ名や表示内容を変更したい場合は、このファイルを編集します。data-tabと対応するパネルのdata-panelには同じ値を設定し、クリックしたタブと表示するコンテンツを関連付けています。

style.cssは、縦型タブ切り替えのレイアウトとデザインを設定するファイルです。.vertical-tab-switch-left_layoutへdisplay:flexを設定し、タブとコンテンツを左右に配置しています。左側の.vertical-tab-switch-left_tabsにはflex-direction:columnを設定して、タブを縦方向へ並べています。選択中のタブは.is-activeによって青い背景と白い文字へ変化します。

script.jsは、タブをクリックしたときの切り替え処理を行うファイルです。クリックされたタブのdata-tabを取得し、すべてのタブとパネルからis-activeを削除したあと、クリックされたタブと同じ値を持つdata-panelへis-activeを追加します。同時に各タブのaria-selectedも更新し、現在選択されているタブの状態を反映します。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html、style.css、script.jsを同じ階層で配置します。index.htmlでは<link rel="stylesheet" href="style.css">でCSSを読み込み、ページ下部の<script src="script.js"></script>でJavaScriptを読み込む構成です。

3つのファイルを配置したら、sample/index.htmlをブラウザで開きます。初期状態では左側の「プロフィール」タブが選択され、右側へプロフィールの内容が表示されます。「サービス」をクリックするとサービス内容へ、「お問い合わせ」をクリックするとお問い合わせ内容へ切り替わります。

タブやコンテンツの内容を変更する場合は、index.html内の表示文字を編集します。タブとパネルの対応関係を変更する場合は、タブ側のdata-tabとパネル側のdata-panelを同じ値にしてください。たとえばdata-tab="profile"のタブは、data-panel="profile"のコンテンツを表示します。

カスタマイズできる内容
index.htmlでは、「縦型タブ切り替え（左タブ版）」のタイトル、説明文、「プロフィール」「サービス」「お問い合わせ」のタブ名、それぞれのパネルタイトルと本文を変更できます。表示したい内容に合わせて、会社情報、商品情報、料金プランなど別の内容へ置き換えることもできます。

style.cssでは、全体の最大横幅、余白、背景色、枠線、角丸、文字サイズを変更できます。.vertical-tab-switch-left_tabsでは左側のタブエリアの横幅、.vertical-tab-switch-left_panelでは右側コンテンツの高さや余白、.vertical-tab-switch-left_tab.is-activeでは選択中タブの背景色と文字色を変更できます。

タブの表示位置はCSSによって左側へ固定されています。.vertical-tab-switch-left_layout内でタブエリアを先に、コンテンツを後に記述し、Flexboxで横並びにすることで「左側にタブ・右側にコンテンツ」という構成にしています。

数値調整
style.css

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

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

margin:40px auto;
タブ切り替え全体の上下余白です。40pxを大きくすると上下の間隔が広がります。autoによって左右中央へ配置されます。

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

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

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

margin:0 0 24px;
説明文の下側に設定している余白です。24pxを大きくすると説明文とタブ切り替え部分との間隔が広がります。

flex:0 0 180px;
左側に表示するタブエリアの横幅です。180pxを大きくするとタブが横に広がり、小さくすると狭くなります。

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

padding:14px;
各タブボタンの内側余白です。値を大きくすると文字とタブ外枠との間隔が広がります。

min-height:210px;
右側に表示するコンテンツパネルの最小高さです。値を大きくすると表示エリアが高くなり、小さくすると低くなります。

padding:24px;
コンテンツパネルの内側余白です。値を大きくすると文章とパネル外枠との間隔が広がります。

border-radius:0 12px 12px 0;
コンテンツパネルの角丸です。右上と右下を12pxの角丸にし、左側はタブとつながるように0を設定しています。

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

outline:3px solid rgba(11,107,255,.22);
キーボード操作でタブへフォーカスしたときに表示する外側の線です。3pxを大きくすると線が太くなり、小さくすると細くなります。

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

レスポンシブ対応
このサンプルはstyle.cssでレスポンシブ対応しています。タブ切り替え全体にwidth:100%とmax-width:700pxを設定しているため、画面幅が狭くなると利用できる横幅に合わせて縮小します。右側のコンテンツにはflex:1とmin-width:0を設定し、左側のタブ以外のスペースを使用する構成です。

@media screen and (max-width:640px)では、画面幅640px以下で全体の内側余白を24px 18pxへ変更し、左側タブの横幅を180pxから120pxへ縮小します。タブの文字サイズは16pxから14px、最小高さは64pxから58pxへ変更し、右側コンテンツも最小高さを190px、内側余白を20px 16pxへ調整します。

スマートフォンでも「左側に縦型タブ・右側にコンテンツ」という基本配置は維持されます。画面幅に応じてタブの横幅や文字サイズ、コンテンツの余白を縮小するため、スマートフォン・タブレット・PCで利用できる構成です。