【コピペで実装】初心者必見！タブ切り替えの実装方法

はじめに

「タブ切り替えをつけたいけど、JavaScriptが苦手で実装方法が分からない…」
「CSSでデザインを整えるのに時間がかかってしまう…」
「コピペできる完成形のコードが欲しい！」

そんな悩みを抱えている方も多いのではないでしょうか？

本記事では、これらの悩みを解決するために、JavaScriptとCSSの基本的な実装方法を詳しく解説していきます。

また、完成形のコードもご用意していますので、すぐにコピー&ペーストで導入することもできます。

見本

今回は下記のようなタブ切り替えを実装していきます。

ポイントは下記になります。

• アクティブなタブが青色でハイライトされ、現在地が分かりやすい
• クリック時にタブとコンテンツが0.3秒でフェードイン/アウト
• ホバー時に薄い青色で表示され、インタラクティブ性を向上
• JavaScriptでクラスを切り替えることで、シンプルに実装

タブ切り替えの実装方法

HTML

<div class="tab">
  <div class="tab-buttons">
    <button class="active">TAB1</button>
    <button>TAB2</button>
    <button>TAB3</button>
  </div>
  <div class="tab-contents">
    <div class="content active">
      <h3>タブ1の内容</h3>
      <p>タブ1のコンテンツが表示されます。<br>クリックで他のタブに切り替わります。</p>
    </div>
    <div class="content">
      <h3>タブ2の内容</h3>
      <p>タブ2のコンテンツです。<br>フェードイン/アウトのアニメーション付きです。</p>
    </div>
    <div class="content">
      <h3>タブ3の内容</h3>
      <p>タブ3のコンテンツになります。<br>シンプルで使いやすいデザインです。</p>
    </div>
  </div>
</div>

HTMLの解説は以下の通りです。

• tabクラス：タブ全体を包む親要素です
• tab-buttonsクラス：タブのボタン部分をまとめる要素です
• button要素：実際のタブボタンです。activeクラスが付いているものが選択状態になります
• tab-contentsクラス：タブの中身をまとめる要素です
• contentクラス：各タブの中身です。activeクラスが付いているものが表示されます

CSS

.tab {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.tab-buttons {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.tab-buttons button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}
.tab-buttons button:hover {
  background: #f0f8ff;
}
.tab-buttons button.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}
.tab-contents .content {
  display: none;
  padding: 20px 0;
  animation: fadeIn 0.3s ease-in-out;
}
.tab-contents .content.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

CSSの主要なポイント解説は以下の通りです。

• タブボタンはflexで横並びにし、下線で区切りを表現
• ホバー時は背景色を変更して、インタラクティブ性を向上
• アクティブなタブは青色の下線と文字色で強調
• コンテンツの切り替えにフェードインのアニメーションを実装
• レスポンシブ対応のため、最大幅を設定し中央寄せに

JavaScript

見た目が完成したので、次はJavaScriptで動きをつけてタブ切り替えができるようにしていきます。

document.addEventListener('DOMContentLoaded', () => {
  // タブボタンを全て取得
  const tabs = document.querySelectorAll('.tab-buttons button');

  // タブコンテンツを全て取得
  const contents = document.querySelectorAll('.tab-contents .content');
  // 各タブボタンにクリックイベントを設定
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      // 全てのタブからactiveクラスを削除
      tabs.forEach(tab => tab.classList.remove('active'));
  // 全てのコンテンツからactiveクラスを削除
  contents.forEach(content => content.classList.remove('active'));

  // クリックされたタブとそれに対応するコンテンツにactiveクラスを付与
  tab.classList.add('active');
  contents[index].classList.add('active');
});

  });
});

主要な部分の解説は以下の通りです。

• DOMContentLoadedイベントで、HTMLの読み込み完了後に処理を実行
• querySelectorAllで、タブボタンとコンテンツの要素を全て取得
• forEachで各タブボタンにクリックイベントを設定
• クリック時に全ての要素からactiveクラスを削除し、クリックされたタブとそれに対応するコンテンツにactiveクラスを付与
• インデックス番号を使って、クリックされたタブに対応するコンテンツを特定

完成コード

以下は完成後のコードです。

HTML

<div class="tab">
  <div class="tab-buttons">
    <button class="active">TAB1</button>
    <button>TAB2</button>
    <button>TAB3</button>
  </div>
  <div class="tab-contents">
    <div class="content active">
      <h3>タブ1の内容</h3>
      <p>タブ1のコンテンツが表示されます。<br>クリックで他のタブに切り替わります。</p>
    </div>
    <div class="content">
      <h3>タブ2の内容</h3>
      <p>タブ2のコンテンツです。<br>フェードイン/アウトのアニメーション付きです。</p>
    </div>
    <div class="content">
      <h3>タブ3の内容</h3>
      <p>タブ3のコンテンツになります。<br>シンプルで使いやすいデザインです。</p>
    </div>
  </div>
</div>

CSS

.tab {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.tab-buttons button {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}
.tab-buttons button:hover {
  background: #f0f8ff;
}
.tab-buttons button.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}
.tab-contents .content {
  display: none;
  padding: 20px 0;
  animation: fadeIn 0.3s ease-in-out;
}
.tab-contents .content.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  // タブボタンを全て取得
  const tabs = document.querySelectorAll('.tab-buttons button');

  // タブコンテンツを全て取得
  const contents = document.querySelectorAll('.tab-contents .content');
  // 各タブボタンにクリックイベントを設定
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      // 全てのタブからactiveクラスを削除
      tabs.forEach(tab => tab.classList.remove('active'));
  // 全てのコンテンツからactiveクラスを削除
  contents.forEach(content => content.classList.remove('active'));

  // クリックされたタブとそれに対応するコンテンツにactiveクラスを付与
  tab.classList.add('active');
  contents[index].classList.add('active');
});

  });
});

さいごに

今回は、シンプルで使いやすいタブ切り替えの実装方法を解説しました。
JavaScriptを使ってクラスを切り替えることで、アニメーションもスムーズに動作するタブが実装できます。

このタブ切り替えは以下のような場面で活用できます。

• 商品の詳細情報とレビューを切り替えて表示したい時
• プロフィールページで基本情報と詳細情報を整理したい時
• よくある質問（FAQ）をカテゴリごとに分けて表示したい時

タブは実務でもよく実装しますので、ぜひ参考に実装してみてください。