WEBデザイン

タブ切り替えの実装方法

Webサイトやブログで情報をスッキリ見せたいときに便利なのが「タブ切り替え」です。複数のコンテンツを一つのスペースにまとめ、ページ遷移なく訪問者に必要な情報を提供することができるUIです。本記事では、タブ切り替えの実装方法を分かりやすくご紹介します。

今回の記事で分かること
情報量が多くてもスッキリ見せられるタブ切り替えの実装方法がわかります。

完成デモの紹介

まずはデモをご覧ください。

See the Pen タブ切り替え by はなはな氏 (@wxftomuu-the-selector) on CodePen.

ソースコードについて

HTML

今回のサンプルでは、jQueryとCSSを使用して、タブ切り替え機能を実装しています。
5つのタブメニューを用意し、各タブに対応するコンテンツを表示しています。必要に応じてタブの数やコンテンツは自由に追加・変更してください。

<!-- ▼ jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<h3>タブ切り替え</h3>
<div class="container">
  <!-- ▼ タブメニュー -->
  <ul class="tab">
    <li><a href="#tab1">テキスト</a></li>
    <li><a href="#tab2">画像</a></li>
    <li><a href="#tab3">リスト</a></li>
    <li><a href="#tab4">テーブル</a></li>
    <li><a href="#tab5">何でも入ります</a></li>
  </ul>

  <!-- ▼ タブごとのコンテンツ -->
  <div id="tab1" class="tab_area">
    <p>テキストはもちろん</p>
  </div>

  <div id="tab2" class="tab_area">
    <p>画像も配置できます</p>
    <img src="https://mrhanahana.com/cms/wp-content/uploads/2025/08/img_loading.png" />
  </div>

  <div id="tab3" class="tab_area">
    <p>リストや</p>
    <ul>
      <li>リスト項目①</li>
      <li>リスト項目②</li>
      <li>リスト項目③</li>
    </ul>
    <ol>
      <li>番号リスト項目①</li>
      <li>番号リスト項目②</li>
      <li>番号リスト項目③</li>
    </ol>
  </div>

  <div id="tab4" class="tab_area">
    <p>テーブルも</p>
    <table class="rps_table">
      <tbody>
        <tr>
          <th>項目</th>
          <td>内容</td>
        </tr>
        <tr>
          <th>項目</th>
          <td>内容</td>
        </tr>
        <tr>
          <th>項目</th>
          <td>内容</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="tab5" class="tab_area">
    <p>どのようなコンテンツでも自由に配置できます</p>
    <div class="flbox">
      <div class="item">
        <img src="https://mrhanahana.com/cms/wp-content/uploads/2025/08/img_loading.png" />
      </div>
      <div class="item">
        <ul>
          <li>リスト項目①</li>
          <li>リスト項目②</li>
          <li>リスト項目③</li>
        </ul>
        <ol>
          <li>番号リスト項目①</li>
          <li>番号リスト項目②</li>
          <li>番号リスト項目③</li>
        </ol>
      </div>
      <div class="item">
        <table class="rps_table">
          <tbody>
            <tr>
              <th>項目</th>
              <td>内容</td>
            </tr>
            <tr>
              <th>項目</th>
              <td>内容</td>
            </tr>
            <tr>
              <th>項目</th>
              <td>内容</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

CSS

続いて、タブに適用するデザイン用のCSSをご紹介します。
今回のサンプルでは、シンプルかつ見やすいデザインを採用し、スマートフォンなど小さな画面でも横スクロールで操作できるようにしています。必要に応じて、サイトの雰囲気やテーマカラーに合わせて調整してみてください。

/* =========================
   コンテンツ全体のスタイル
=========================*/
/* 
この部分は、タブ切り替えを適用するための
サンプルレイアウト（見た目）のスタイルです。
実際のサイトに合わせて、自由にカスタマイズしてください。
*/
h3 {
  text-align: center;
  color: #1a8093;
}

.container {
  color: #333;
  max-width: fit-content;
  margin: 0 auto;
}

ul, ol {
  width: fit-content;
  margin: 0 auto 20px;
  padding: 0;
}

.rps_table {
  width: 100%;
  line-height: 2.0;
  border-collapse: collapse;
}

.rps_table td, .rps_table th {
  border: 1px solid #ccc;
  padding: 10px 15px;
  line-height: 1.5;
}

.rps_table th {
  background: #f0f0f0;
  font-weight: normal;
  text-align: center;
}

@media only screen and (max-width:425px) {
  .rps_table {
    border: none;
  }
  .rps_table tr {
    display: block;
  }
  .rps_table th, .rps_table td {
    display: list-item;
    list-style-type: none;
    border: none;
    width: 100%;
  }
  .rps_table td {
    border-top: none;
  }
}

.flbox {
  display: flex;
  flex-wrap: wrap;
}
.flbox .item {
  padding: 20px 30px;
}

/* =========================
   タブのデザイン
=========================*/
ul.tab {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid #ccc;
}

/* タブのリンク */
ul.tab li a {
  position: relative;
  display: block;
  padding: 15px 5px;
  text-decoration: none;
  color: #ccc;
  transition: 0.3s;
  text-align: center;
  white-space: nowrap;
}

/* タブ間の余白 */
.tab li:not(:last-child) {
  padding-right: 30px;
}

/* ホバー時の色 */
.tab li a:hover {
  color: #1a8093;
}

/* アクティブなタブ */
ul.tab li.active a {
  color: #1a8093;
  font-weight: bold;
}

/* 下線アニメーション */
ul.tab li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: left;
  width: 100%;
  height: 3px;
  background-color: #1a8093;
  transition: transform 0.4s ease;
  z-index: 9;
}

/* ホバーまたはアクティブ時に下線を表示 */
ul.tab li a:hover::after,
ul.tab li.active a::after {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================
   タブの内容エリア
=========================*/
.tab_area {
  display: none;
  opacity: 0;
  margin: 0 auto;
  padding: 20px 0px;
  text-align: center;
}

/* 表示中のタブエリア */
.tab_area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
}

/* フェードインアニメーション */
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tab_area p {
  margin: 0 0 1rem 0;
}
.tab_area p:last-child {
  margin: 0;
}

/* --- スマホ表示用（横スクロール対応） --- */
@media only screen and (max-width: 425px) {
  ul.tab {
    width: 100%;
    flex-wrap: nowrap;               /* 折り返さない */
    overflow-x: scroll;              /* 横スクロール可能 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* スムーズスクロール */
  }
  .tab li:not(:last-child) {
    padding-right: 20px;
  }
}

JS

以下は、タブをクリックした際に対応するコンテンツを切り替えるためのJavaScriptコードです。
クリックイベントでタブを切り替えるだけでなく、ページ読み込み時に最初のタブを自動的に表示したり、URLのハッシュ（#id）を利用して特定のタブを直接表示できるようになっています。

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

// 指定されたハッシュID（例: #tab1）に対応するタブを表示する関数
function GethashID(hashIDName) {
  if (hashIDName) {
    // .tab li 内のすべてのリンクを走査
    $('.tab li').find('a').each(function () {
      var idName = $(this).attr('href'); // 各リンクの href 属性（例: #tab1）

      // クリックされたタブ or URLのハッシュが一致した場合
      if (idName == hashIDName) {
        var parentElm = $(this).parent(); // 対応する li 要素

        // すべてのタブから active を外し、対象タブだけ active に
        $('.tab li').removeClass("active");
        $(parentElm).addClass("active");

        // すべてのタブコンテンツを非表示にし、対象タブだけ表示
        $(".tab_area").removeClass("is-active");
        $(hashIDName).addClass("is-active");
      }
    });
  }
}

// タブがクリックされたときの処理
$('.tab a').on('click', function () {
  var idName = $(this).attr('href'); // href に設定された ID名を取得
  GethashID(idName);                 // タブ切り替え実行
  return false;                      // ページ内リンクのデフォルト動作を無効化
});

// ページ読み込み時の処理
$(window).on('load', function () {
  // 最初のタブと最初のコンテンツを強制的に表示状態にする
  $('.tab li').eq(0).addClass("active");
  $('.tab_area').eq(0).addClass("is-active");

  // URLにハッシュ（#tab2 など）がある場合、そのタブを表示
  var hashName = location.hash;
  GethashID(hashName);
});

まとめ

今回ご紹介したタブ切り替えの実装方法は、CSSで見た目を整え、JavaScriptで動きを制御する仕組みです。レスポンシブ対応やURLのハッシュによる直接アクセスにも対応しているため、実際のサイト制作でも幅広く活用していただけます。
デザインや動作を調整しながら、ご自身のWebサイトに合ったタブ切り替え機能を実装してみてください。

なお、弊社では「サイトの更新まで手が回らない…」という方向けに、更新作業の代行や技術的なサポートも承っております。「同じように実装したけれどうまく動かない」などお困りの際は、お気軽にご相談ください。

少しでもこの記事がお役に立てれば幸いです。最後までお読みいただき、ありがとうございました。

この記事を書いた人
西尾 洋祐
西尾 洋祐
東京理科大学理工学部情報科学科卒業後、推薦枠にて東証一部上場のIT企業に就職。その後独立し、フリーランスとして活動中。
最近書いた記事
WEBデザイン
タブ切り替えの実装方法
WEBデザイン
Swiperの使い方
WEBデザイン
ローディングアニメーション
WEBデザイン
波形アニメーション
おすすめの記事