この記事にはプロモーションが含まれています。

【コピペOK】タブ切り替えアニメーション完全ガイド｜6種類の実装方法

2025-07-302025-07-31

ケケンタ

タブ切り替えにアニメーション効果を追加したい……

ケケンタ

コンテンツの切り替えをより魅力的にしたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
タブ切り替えアニメーション

をご紹介します。

6種類のアニメーション効果を完全網羅した実装なので、いままさに「タブ切り替えを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するタブ切り替えアニメーション

フェード効果（フェードイン/アウト）
スライド効果（スライドイン/アウト）
ズーム効果（ズームイン/アウト）
フリップ効果（フリップイン/アウト）
スケール効果（スケールイン/アウト）
スライドダウン効果（上から下へのスライド）

ケケンタ

特にコンテンツ切り替えやナビゲーションには、タブ切り替えアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【コピペOK】モダンボタンホバーアニメーション完全ガイド｜8種類の実装

【コピペOK】3Dボタンホバーアニメーション完全ガイド｜6種類の実装方法

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥2,800 (2025/7/31 22:29:56時点 Amazon調べ-詳細)

動くWebデザインアイディア帳　実践編

created by Rinker

¥2,599 (2025/7/31 22:30:48時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥3,000 (2025/07/31 20:43:57時点 Amazon調べ-詳細)

タブ切り替えアニメーションとは

タブ切り替えアニメーションは、異なるコンテンツ間の遷移を視覚的に表現するアニメーション効果です。ユーザーに現在の位置を分かりやすく伝え、スムーズなコンテンツ切り替えを提供する効果的な手法です。

効果的な使用場面

適している場面

コンテンツ切り替え
ナビゲーション
設定画面
商品詳細
ダッシュボード

避けるべき場面

即座に切り替わる必要がある場面
ユーザーが操作を中断できない場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
フリップ効果	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐
スケール効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライドダウン効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

フェード効果

① デモ

See the Pen タブ切り替えフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content">
    <div class="tab-panel active fade-panel" id="tab1">
      <h3>タブ1のコンテンツ</h3>
      <p>これはタブ1の内容です。フェード効果で表示されます。</p>
    </div>
    <div class="tab-panel fade-panel" id="tab2">
      <h3>タブ2のコンテンツ</h3>
      <p>これはタブ2の内容です。フェード効果で表示されます。</p>
    </div>
    <div class="tab-panel fade-panel" id="tab3">
      <h3>タブ3のコンテンツ</h3>
      <p>これはタブ3の内容です。フェード効果で表示されます。</p>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* タブボタン */
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn:hover {
  color: #333;
}

.tab-btn.active {
  color: #4CAF50;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4CAF50;
  animation: fadeIn 0.3s ease;
}

/* タブコンテンツ */
.tab-content {
  position: relative;
  min-height: 200px;
}

.tab-panel {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tab-panel.active {
  display: block;
  opacity: 1;
}

.tab-panel h3 {
  margin-bottom: 15px;
  color: #333;
}

.tab-panel p {
  color: #666;
  line-height: 1.6;
}

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

.fade-panel {
  animation: fadeIn 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.tab-panel');
  
  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');
      
      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
      
      // タブパネルの状態更新
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });
      
      const targetPanel = document.getElementById(targetTab);
      targetPanel.classList.add('active');
    });
  });
});

⑤ カスタマイズ例

/* カラーテーマの変更 */
.tab-btn.active {
  color: #2196F3;
}

.tab-btn.active::after {
  background: #2196F3;
}

/* アニメーション速度の調整 */
.tab-panel {
  transition: opacity 0.8s ease;
}

/* フェード効果の強度調整 */
.fade-panel {
  animation: fadeIn 0.8s ease;
}

スライド効果

① デモ

See the Pen タブ切り替えスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的なスライド表現
視覚的インパクトが高い
スムーズなアニメーション

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content slide-content">
    <div class="tab-panel active slide-panel" id="tab1">
      <h3>タブ1のコンテンツ</h3>
      <p>これはタブ1の内容です。スライド効果で表示されます。</p>
    </div>
    <div class="tab-panel slide-panel" id="tab2">
      <h3>タブ2のコンテンツ</h3>
      <p>これはタブ2の内容です。スライド効果で表示されます。</p>
    </div>
    <div class="tab-panel slide-panel" id="tab3">
      <h3>タブ3のコンテンツ</h3>
      <p>これはタブ3の内容です。スライド効果で表示されます。</p>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* タブボタン */
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn:hover {
  color: #333;
}

.tab-btn.active {
  color: #4CAF50;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4CAF50;
  animation: fadeIn 0.3s ease;
}

/* スライドコンテンツ */
.slide-content {
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

.slide-panel {
  position: absolute;
  width: 100%;
  left: 100%;
  opacity: 0;
  transition: all 0.5s ease;
}

.slide-panel.active {
  left: 0;
  opacity: 1;
}

.slide-panel.prev {
  left: -100%;
  opacity: 0;
}

.slide-panel.next {
  left: 100%;
  opacity: 0;
}

.slide-panel h3 {
  margin-bottom: 15px;
  color: #333;
}

.slide-panel p {
  color: #666;
  line-height: 1.6;
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.slide-panel');
  let currentTab = 'tab1';
  
  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');
      
      if (targetTab === currentTab) return;
      
      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');
      
      // スライドアニメーション
      const currentPanel = document.getElementById(currentTab);
      const targetPanel = document.getElementById(targetTab);
      
      // 現在のタブを非表示にする
      currentPanel.classList.remove('active');
      
      // スライド方向を決定（タブの順序に基づく）
      const currentIndex = Array.from(tabButtons).findIndex(btn => btn.getAttribute('data-tab') === currentTab);
      const targetIndex = Array.from(tabButtons).findIndex(btn => btn.getAttribute('data-tab') === targetTab);
      
      if (targetIndex > currentIndex) {
        // 右方向にスライド
        currentPanel.classList.add('prev');
        targetPanel.classList.add('next');
      } else {
        // 左方向にスライド
        currentPanel.classList.add('next');
        targetPanel.classList.add('prev');
      }
      
      // アニメーション完了後にターゲットタブを表示
      setTimeout(() => {
        targetPanel.classList.remove('next', 'prev');
        targetPanel.classList.add('active');
        currentPanel.classList.remove('prev', 'next');
      }, 500); // CSSのtransition時間に合わせる
      
      currentTab = targetTab;
    });
  });
});

⑤ カスタマイズ例

/* スライド方向の変更 */
.slide-panel {
  top: 100%;
  left: 0;
}

.slide-panel.active {
  top: 0;
}

/* スライド速度の調整 */
.slide-panel {
  transition: all 0.8s ease;
}

ズーム効果

① デモ

===== ここにCode pen設置 ======

See the Pen タブ切り替えズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小による動的表現
視覚的インパクトが高い
注目を集める効果

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content zoom-content">
    <div class="tab-panel active zoom-panel" id="tab1">
      <h3>タブ1のコンテンツ</h3>
      <p>これはタブ1の内容です。ズーム効果で表示されます。</p>
    </div>
    <div class="tab-panel zoom-panel" id="tab2">
      <h3>タブ2のコンテンツ</h3>
      <p>これはタブ2の内容です。ズーム効果で表示されます。</p>
    </div>
    <div class="tab-panel zoom-panel" id="tab3">
      <h3>タブ3のコンテンツ</h3>
      <p>これはタブ3の内容です。ズーム効果で表示されます。</p>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* タブボタン */
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn:hover {
  color: #333;
}

.tab-btn.active {
  color: #4CAF50;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4CAF50;
  animation: fadeIn 0.3s ease;
}

/* ズームコンテンツ */
.zoom-content {
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

.zoom-panel {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease;
}

.zoom-panel.active {
  opacity: 1;
  transform: scale(1);
}

.zoom-panel h3 {
  margin-bottom: 15px;
  color: #333;
}

.zoom-panel p {
  color: #666;
  line-height: 1.6;
}

/* ズームアニメーション */
@keyframes zoomIn {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.2);
    opacity: 0;
  }
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.zoom-panel');

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // ズームアニメーション
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });

      const targetPanel = document.getElementById(targetTab);
      targetPanel.classList.add('active');
    });
  });
});

⑤ カスタマイズ例

/* ズーム効果の強度調整 */
.zoom-panel {
  transform: scale(0.5);
}

.zoom-panel.active {
  transform: scale(1.1);
}

/* ズーム速度の調整 */
.zoom-panel {
  transition: all 0.8s ease;
}

フリップ効果

① デモ

See the Pen タブ切り替えフリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップ効果の特徴

3D的な回転効果
視覚的インパクトが最大
プレミアムな印象

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content flip-content">
    <div class="tab-panel active flip-panel" id="tab1">
      <h3>タブ1のコンテンツ</h3>
      <p>これはタブ1の内容です。フリップ効果で表示されます。</p>
    </div>
    <div class="tab-panel flip-panel" id="tab2">
      <h3>タブ2のコンテンツ</h3>
      <p>これはタブ2の内容です。フリップ効果で表示されます。</p>
    </div>
    <div class="tab-panel flip-panel" id="tab3">
      <h3>タブ3のコンテンツ</h3>
      <p>これはタブ3の内容です。フリップ効果で表示されます。</p>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* タブボタン */
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn:hover {
  color: #333;
}

.tab-btn.active {
  color: #4CAF50;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4CAF50;
  animation: fadeIn 0.3s ease;
}

/* フリップコンテンツ */
.flip-content {
  perspective: 1000px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

.flip-panel {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: rotateY(90deg);
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.flip-panel.active {
  opacity: 1;
  transform: rotateY(0deg);
}

.flip-panel h3 {
  margin-bottom: 15px;
  color: #333;
}

.flip-panel p {
  color: #666;
  line-height: 1.6;
}

/* フリップアニメーション */
@keyframes flipIn {
  from {
    transform: rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipOut {
  from {
    transform: rotateY(0deg);
    opacity: 1;
  }
  to {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.flip-panel');

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // フリップアニメーション
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });

      const targetPanel = document.getElementById(targetTab);
      targetPanel.classList.add('active');
    });
  });
});

⑤ カスタマイズ例

/* フリップ軸の変更 */
.flip-panel {
  transform: rotateX(90deg);
}

.flip-panel.active {
  transform: rotateX(0deg);
}

/* フリップ速度の調整 */
.flip-panel {
  transition: all 0.8s ease;
}

スケール効果

① デモ

See the Pen タブ切り替えスケール効果 by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

拡大・縮小による動的表現
視覚的なインパクト
モダンな印象

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content scale-content">
    <div class="tab-panel active scale-panel" id="tab1">
      <h3>タブ1のコンテンツ</h3>
      <p>これはタブ1の内容です。スケール効果で表示されます。</p>
    </div>
    <div class="tab-panel scale-panel" id="tab2">
      <h3>タブ2のコンテンツ</h3>
      <p>これはタブ2の内容です。スケール効果で表示されます。</p>
    </div>
    <div class="tab-panel scale-panel" id="tab3">
      <h3>タブ3のコンテンツ</h3>
      <p>これはタブ3の内容です。スケール効果で表示されます。</p>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* タブボタン */
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn:hover {
  color: #333;
}

.tab-btn.active {
  color: #4CAF50;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4CAF50;
  animation: fadeIn 0.3s ease;
}

/* スケールコンテンツ */
.scale-content {
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

.scale-panel {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.4s ease;
}

.scale-panel.active {
  opacity: 1;
  transform: scale(1);
}

.scale-panel h3 {
  margin-bottom: 15px;
  color: #333;
}

.scale-panel p {
  color: #666;
  line-height: 1.6;
}

/* スケールアニメーション */
@keyframes scaleIn {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.scale-panel');

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // スケールアニメーション
      tabPanels.forEach(panel => {
        panel.classList.remove('active');
      });

      const targetPanel = document.getElementById(targetTab);
      targetPanel.classList.add('active');
    });
  });
});

⑤ カスタマイズ例

/* スケール効果の強度調整 */
.scale-panel {
  transform: scale(0.2);
}

.scale-panel.active {
  transform: scale(1.1);
}

/* スケール速度の調整 */
.scale-panel {
  transition: all 0.6s ease;
}

スライドダウン効果

① デモ

See the Pen タブ切り替えスライドダウン by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライドダウン効果の特徴

上から下への自然なスライド表現
視覚的インパクトが高い
モダンで洗練された印象

② HTML

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">タブ1</button>
    <button class="tab-btn" data-tab="tab2">タブ2</button>
    <button class="tab-btn" data-tab="tab3">タブ3</button>
  </div>

  <div class="tab-content slide-down-content">
    <div class="tab-panel active slide-down-panel" id="tab1">
      <h3>タブ1のコンテンツ</h3>
      <p>これはタブ1の内容です。スライドダウン効果で表示されます。</p>
    </div>
    <div class="tab-panel slide-down-panel" id="tab2">
      <h3>タブ2のコンテンツ</h3>
      <p>これはタブ2の内容です。スライドダウン効果で表示されます。</p>
    </div>
    <div class="tab-panel slide-down-panel" id="tab3">
      <h3>タブ3のコンテンツ</h3>
      <p>これはタブ3の内容です。スライドダウン効果で表示されます。</p>
    </div>
  </div>
</div>

③ CSS

/* タブコンテナ */
.tab-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* タブボタン */
.tab-buttons {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 20px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-btn:hover {
  color: #333;
}

.tab-btn.active {
  color: #4CAF50;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #4CAF50;
  animation: fadeIn 0.3s ease;
}

/* スライドダウンコンテンツ */
.slide-down-content {
  overflow: hidden;
  position: relative;
  min-height: 200px;
}

.slide-down-panel {
  position: absolute;
  width: 100%;
  top: -100%;
  opacity: 0;
  transition: all 0.5s ease;
}

.slide-down-panel.active {
  top: 0;
  opacity: 1;
}

.slide-down-panel.prev {
  top: 100%;
  opacity: 0;
}

.slide-down-panel.next {
  top: -100%;
  opacity: 0;
}

.slide-down-panel h3 {
  margin-bottom: 15px;
  color: #333;
}

.slide-down-panel p {
  color: #666;
  line-height: 1.6;
}

/* スライドダウンアニメーション */
@keyframes slideDownIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

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

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabPanels = document.querySelectorAll('.slide-down-panel');
  let currentTab = 'tab1';

  tabButtons.forEach(button => {
    button.addEventListener('click', function() {
      const targetTab = this.getAttribute('data-tab');

      if (targetTab === currentTab) return;

      // タブボタンの状態更新
      tabButtons.forEach(btn => btn.classList.remove('active'));
      this.classList.add('active');

      // スライドダウンアニメーション
      const currentPanel = document.getElementById(currentTab);
      const targetPanel = document.getElementById(targetTab);

      // 現在のタブを非表示にする
      currentPanel.classList.remove('active');

      // スライド方向を決定（タブの順序に基づく）
      const currentIndex = Array.from(tabButtons).findIndex(btn => btn.getAttribute('data-tab') === currentTab);
      const targetIndex = Array.from(tabButtons).findIndex(btn => btn.getAttribute('data-tab') === targetTab);

      if (targetIndex > currentIndex) {
        // 下方向にスライド
        currentPanel.classList.add('prev');
        targetPanel.classList.add('next');
      } else {
        // 上方向にスライド
        currentPanel.classList.add('next');
        targetPanel.classList.add('prev');
      }

      // アニメーション完了後にターゲットタブを表示
      setTimeout(() => {
        targetPanel.classList.remove('next', 'prev');
        targetPanel.classList.add('active');
        currentPanel.classList.remove('prev', 'next');
      }, 500); // CSSのtransition時間に合わせる

      currentTab = targetTab;
    });
  });
});

⑤ カスタマイズ例

/* スライドダウン速度の調整 */
.slide-down-panel {
  transition: all 0.8s ease;
}

/* スライドダウン効果の強度調整 */
.slide-down-panel {
  top: -150%;
}

.slide-down-panel.prev {
  top: 150%;
}

/* スライドダウン時の影効果 */
.slide-down-panel.active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}