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

2024年12月22日

はじめに

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

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

本記事では、これらの悩みを解決するために、JavaScriptとCSSの基本的な実装方法を詳しく解説していきます。また、完成形のコードもご用意していますので、すぐにコピー&ペーストで導入することもできます。

詳しく解説していますので、コードだけほしい方は最後の「完成コード」までスクロールしてください。

見本

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

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

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

アクティブなタブが青色でハイライトされ、現在地が分かりやすい
クリック時にタブとコンテンツが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');
    });
  });
});