フェードイン・フェードアウトで切り替わるタブ切り替えを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

フェードイン・フェードアウトで切り替わるタブ切り替えを作る方法

フェードイン・フェードアウトで切り替わるタブ切り替えを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、クリックしたタブに対応する内容を滑らかなフェードアニメーションで表示します。現在のパネルがゆっくりフェードアウトしたあと、選択したタブのパネルがフェードインするため、瞬時に内容が変わる一般的なタブよりも落ち着いた切り替えを実現できます。

商品情報、料金プラン、サービス紹介、会員サイトの設定画面、管理画面の項目整理など、限られた表示領域で複数の内容を切り替えたい場面に利用できます。選択中のタブは青色で強調され、現在どの内容を表示しているのか分かりやすくなっています。また、切り替え中の連続クリックを防ぐ処理も入っているため、フェードアニメーションが途中で重ならず、安定した動作を確認できます。

タブ名や各パネルの文章はHTMLから変更でき、CSSでは全体の横幅、余白、背景色、文字色、枠線、角丸、パネルの高さ、フェード時間、移動量などを調整できます。JavaScriptではクリックされたタブと表示するパネルを対応付け、フェードアウトとフェードインの待機時間を管理します。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいタブ切り替えとして活用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

フェードで切り替わるタブ

タブをクリックすると、対応する内容がゆっくりフェードしながら切り替わります。

HTMLはWebページの構造を作るためのマークアップ言語です。タブと各パネルの内容を配置します。

CSSはタブの色やレイアウト、パネルのフェードイン・フェードアウトを設定するために使います。

JavaScriptはクリックされたタブに合わせて、表示するパネルを切り替えるために使います。

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="fade-tab-switch_wrap">

    <!-- タイトル -->
    <div class="fade-tab-switch_title">
      フェードで切り替わるタブ
    </div>

    <!-- 説明文 -->
    <p class="fade-tab-switch_text">
      タブをクリックすると、対応する内容がゆっくりフェードしながら切り替わります。
    </p>

    <!-- タブ一覧 -->
    <div
      class="fade-tab-switch_tabs"
      role="tablist"
      aria-label="使用技術">

      <!-- HTMLタブ -->
      <button
        class="fade-tab-switch_tab is-active"
        id="fade-tab-switch-html"
        type="button"
        role="tab"
        aria-controls="fade-tab-switch-panel-html"
        aria-selected="true"
        data-fade-tab="html">
        HTML
      </button>

      <!-- CSSタブ -->
      <button
        class="fade-tab-switch_tab"
        id="fade-tab-switch-css"
        type="button"
        role="tab"
        aria-controls="fade-tab-switch-panel-css"
        aria-selected="false"
        data-fade-tab="css">
        CSS
      </button>

      <!-- JavaScriptタブ -->
      <button
        class="fade-tab-switch_tab"
        id="fade-tab-switch-js"
        type="button"
        role="tab"
        aria-controls="fade-tab-switch-panel-js"
        aria-selected="false"
        data-fade-tab="js">
        JavaScript
      </button>

    </div>

    <!-- パネル全体 -->
    <div class="fade-tab-switch_panels">

      <!-- HTMLパネル -->
      <div
        class="fade-tab-switch_panel is-active"
        id="fade-tab-switch-panel-html"
        role="tabpanel"
        aria-labelledby="fade-tab-switch-html"
        data-fade-panel="html">
        HTMLはWebページの構造を作るためのマークアップ言語です。タブと各パネルの内容を配置します。
      </div>

      <!-- CSSパネル -->
      <div
        class="fade-tab-switch_panel"
        id="fade-tab-switch-panel-css"
        role="tabpanel"
        aria-labelledby="fade-tab-switch-css"
        data-fade-panel="css">
        CSSはタブの色やレイアウト、パネルのフェードイン・フェードアウトを設定するために使います。
      </div>

      <!-- JavaScriptパネル -->
      <div
        class="fade-tab-switch_panel"
        id="fade-tab-switch-panel-js"
        role="tabpanel"
        aria-labelledby="fade-tab-switch-js"
        data-fade-panel="js">
        JavaScriptはクリックされたタブに合わせて、表示するパネルを切り替えるために使います。
      </div>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本文字色 */
  font-family:sans-serif; /* フォント */
  box-sizing:border-box; /* paddingと枠線をサイズへ含める */
}

/* すべての要素 */
.fade-tab-switch_wrap,
.fade-tab-switch_wrap *{
  box-sizing:border-box; /* paddingと枠線をサイズへ含める */
}

/* 全体 */
.fade-tab-switch_wrap{
  width:100%; /* 横幅いっぱい */
  max-width:700px; /* 最大横幅 */
  margin:40px auto; /* 上下余白・中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  color:#111827; /* 文字色 */
}

/* タイトル */
.fade-tab-switch_title{
  margin:0 0 12px; /* 下余白 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  line-height:1.5; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.fade-tab-switch_text{
  margin:0 0 24px; /* 下余白 */
  color:#4b5563; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  line-height:1.8; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* タブ一覧 */
.fade-tab-switch_tabs{
  display:flex; /* 横並び */
  border-bottom:1px solid #d1d5db; /* 下線 */
}

/* タブ */
.fade-tab-switch_tab{
  flex:1; /* 均等幅 */
  min-height:52px; /* 高さ */
  padding:14px; /* 内側余白 */
  border:1px solid #d1d5db; /* 枠線 */
  border-bottom:none; /* 下線を消す */
  border-radius:12px 12px 0 0; /* 上だけ角丸 */
  background:#ffffff; /* 背景色 */
  color:#111827; /* 文字色 */
  font:inherit; /* フォント継承 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 太字 */
  cursor:pointer; /* カーソル */

  /*
    タブの色を0.7秒で切り替えます。
    値を大きくするとゆっくり、
    小さくすると速く切り替わります。
  */
  transition:
    background-color .7s ease,
    color .7s ease;
}

/* 2個目以降のタブ */
.fade-tab-switch_tab + .fade-tab-switch_tab{
  margin-left:6px; /* タブ同士の間隔 */
}

/* 選択中タブ */
.fade-tab-switch_tab.is-active{
  background:#0b6bff; /* 背景色 */
  color:#ffffff; /* 文字色 */
}

/* キーボード操作時 */
.fade-tab-switch_tab:focus-visible{
  position:relative;
  z-index:1;
  outline:3px solid rgba(11,107,255,.22); /* 強調表示 */
  outline-offset:2px;
}

/* パネル全体 */
.fade-tab-switch_panels{
  position:relative; /* パネルを重ねる基準 */
  min-height:150px; /* 最低高さ */
  border:1px solid #d1d5db; /* 枠線 */
  border-top:none; /* 上線を消す */
  background:#ffffff; /* 背景色 */
  overflow:hidden; /* はみ出しを隠す */
}

/* パネル */
.fade-tab-switch_panel{
  position:absolute; /* パネルを重ねる */
  inset:0; /* 全面配置 */
  padding:24px; /* 内側余白 */
  color:#4b5563; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  line-height:1.8; /* 行間 */
  opacity:0; /* 非表示 */
  visibility:hidden; /* 非表示 */
  transform:translateY(18px); /* 少し下から表示 */
  pointer-events:none; /* 非表示中は操作不可 */

  /*
    フェード時間です。
    0.7秒かけて表示・非表示を切り替えます。
    値を大きくするとゆっくり、
    小さくすると速く切り替わります。
  */
  transition:
    opacity .7s ease,
    transform .7s ease,
    visibility .7s ease;
}

/* 表示中パネル */
.fade-tab-switch_panel.is-active{
  opacity:1; /* 表示 */
  visibility:visible; /* 表示 */
  transform:translateY(0); /* 元の位置 */
  pointer-events:auto; /* 操作可能 */
}

/* スマートフォン */
@media(max-width:640px){

  .fade-tab-switch_wrap{
    padding:24px 18px; /* 内側余白 */
  }

  .fade-tab-switch_tab{
    min-height:48px; /* タブ高さ */
    padding:12px 8px; /* 内側余白 */
    font-size:14px; /* 文字サイズ */
  }

  .fade-tab-switch_tab + .fade-tab-switch_tab{
    margin-left:4px; /* タブ間隔 */
  }

  .fade-tab-switch_panels{
    min-height:180px; /* 高さを少し広げる */
  }

  .fade-tab-switch_panel{
    padding:20px 16px; /* 内側余白 */
  }

}

/* すべてのタブを取得 */
const fadeTabSwitchTabs=document.querySelectorAll(
  ".fade-tab-switch_tab"
);

/* すべてのパネルを取得 */
const fadeTabSwitchPanels=document.querySelectorAll(
  ".fade-tab-switch_panel"
);

/* フェード切り替え中かどうかを管理 */
let fadeTabSwitchChanging=false;

/* 各タブへクリック処理を設定 */
fadeTabSwitchTabs.forEach(function(tab){

  tab.addEventListener("click",function(){

    /*
      フェード中または選択中のタブをクリックした場合は
      切り替え処理を行わない
    */
    if(
      fadeTabSwitchChanging ||
      tab.classList.contains("is-active")
    ){
      return;
    }

    /* フェード切り替え中の状態にする */
    fadeTabSwitchChanging=true;

    /* クリックしたタブに対応するパネル名を取得 */
    const target=tab.dataset.fadeTab;

    /* 現在表示されているパネルを取得 */
    const currentPanel=document.querySelector(
      ".fade-tab-switch_panel.is-active"
    );

    /* 次に表示するパネルを取得 */
    const nextPanel=document.querySelector(
      '[data-fade-panel="'+target+'"]'
    );

    /* すべてのタブを通常状態へ戻す */
    fadeTabSwitchTabs.forEach(function(item){

      item.classList.remove("is-active");
      item.setAttribute("aria-selected","false");

    });

    /* クリックしたタブを選択状態にする */
    tab.classList.add("is-active");
    tab.setAttribute("aria-selected","true");

    /* 現在のパネルをフェードアウトする */
    currentPanel.classList.remove("is-active");

    /*
      現在のパネルがフェードアウトしてから
      次のパネルをフェードインする。

      700は0.7秒を表す。
      CSSのtransitionで指定した.7sと同じ値にする。
      値を大きくすると切り替えが遅くなり、
      小さくすると速くなる。
    */
    setTimeout(function(){

      /* 対応するパネルをフェードインする */
      nextPanel.classList.add("is-active");

      /*
        次のパネルのフェードイン完了後に
        連続操作の制限を解除する。

        700は0.7秒を表す。
        CSSのtransitionで指定した.7sと同じ値にする。
      */
      setTimeout(function(){

        fadeTabSwitchChanging=false;

      },700);

    },700);

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではフェードで切り替わるタブと表示内容を配置し、CSSではタブのデザインやフェードイン・フェードアウトのアニメーションを設定します。JavaScriptではクリックされたタブに応じて表示するパネルを切り替え、滑らかなフェードアニメーションを実現します。シンプルな構成なので、そのままコピーして利用できます。

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

各ファイルの役割
index.htmlはタブボタンと各パネルの内容を配置するファイルです。タブ名や表示する文章を自由に変更できます。

style.cssはタブの色や余白、角丸、パネルのレイアウト、フェードイン・フェードアウトのアニメーションを設定するファイルです。見た目や表示速度を調整できます。

script.jsはクリックしたタブに応じて表示するパネルを切り替えるファイルです。フェードアウト後に次のパネルをフェードインさせる処理や、連続クリック防止も行っています。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置してください。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開くと利用できます。各タブをクリックすると、現在の内容がフェードアウトし、対応する内容がフェードインしながら切り替わります。

カスタマイズできる内容
index.htmlではタブ名や各パネルへ表示する文章を自由に変更できます。タブの数を増減することも可能です。

style.cssでは全体の横幅、余白、背景色、文字色、角丸、タブのデザイン、パネルのレイアウト、フェードイン・フェードアウトの速度を変更できます。

script.jsではフェード切り替え時間や、タブ切り替え時の動作を調整できます。クリック制御のタイミングも変更できます。

数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。

padding:32px;
全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。

min-height:52px;
タブボタンの高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。

min-height:150px;
パネル全体の最低高さです。値を大きくすると高さが広がり、小さくすると低くなります。

transform:translateY(18px);
フェードイン開始位置です。18pxを大きくすると下から大きく移動し、小さくすると移動量が少なくなります。

transition:opacity .7s ease, transform .7s ease, visibility .7s ease;
パネルのフェード時間です。0.7秒で切り替わります。値を大きくするとゆっくり、小さくすると速く切り替わります。

script.js
setTimeout(...,700);
フェードアウト・フェードインの待機時間です。CSSの0.7秒と同じ値に設定してください。値を大きくすると切り替えがゆっくりになり、小さくすると速くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせて縮小表示されます。また、640px以下ではpaddingやタブサイズ、パネルの高さを調整するmedia queryを実装しているため、スマートフォン・タブレット・PCで快適に利用できます。