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

タブ切り替え
2026.06.18

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

HTML・CSS・JavaScriptを使って、右側にタブを配置した縦型タブ切り替えを作る方法を紹介します。このサンプルでは、右側のタブをクリックすると対応するコンテンツへ切り替わり、左側に内容を表示できます。管理画面や設定画面、ヘルプページなど、縦型レイアウトで情報を整理して表示したい場合に便利です。

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

デモ

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

右側のタブをクリックすると、左側の内容が切り替わります。

プロフィール情報を表示するエリアです。自己紹介や担当内容などを整理して表示できます。
サービス内容を表示するエリアです。料金、特徴、対応内容などを分けて見せたい場合に便利です。
お問い合わせ情報を表示するエリアです。連絡先や受付時間などをまとめて表示できます。

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

<!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="vertical-tab-switch-right_wrap">

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

    <!-- 説明文 -->
    <p class="vertical-tab-switch-right_text">
      右側のタブをクリックすると、左側の内容が切り替わります。
    </p>

    <!-- レイアウト全体 -->
    <div class="vertical-tab-switch-right_layout">

      <!-- コンテンツ一覧 -->
      <div class="vertical-tab-switch-right_contents">

        <div class="vertical-tab-switch-right_panel is-active" data-panel="profile">
          プロフィール情報を表示するエリアです。自己紹介や担当内容などを整理して表示できます。
        </div>

        <div class="vertical-tab-switch-right_panel" data-panel="service">
          サービス内容を表示するエリアです。料金、特徴、対応内容などを分けて見せたい場合に便利です。
        </div>

        <div class="vertical-tab-switch-right_panel" data-panel="contact">
          お問い合わせ情報を表示するエリアです。連絡先や受付時間などをまとめて表示できます。
        </div>

      </div>

      <!-- タブボタン一覧 -->
      <div class="vertical-tab-switch-right_tabs">

        <button class="vertical-tab-switch-right_tab is-active" type="button" data-tab="profile">
          プロフィール
        </button>

        <button class="vertical-tab-switch-right_tab" type="button" data-tab="service">
          サービス
        </button>

        <button class="vertical-tab-switch-right_tab" type="button" data-tab="contact">
          お問い合わせ
        </button>

      </div>

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptをそれぞれ別ファイルに分けて使用します。index.html、style.css、script.js を同じフォルダに配置してください。 

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

index.html をブラウザで開くと、縦型タブ切り替えの右タブ版を確認できます。右側のタブをクリックすると、左側の対応するコンテンツだけが表示されます。

コメント