指定時間ごとにタブを自動で切り替える方法【HTML/CSS/JavaScript・サンプルコード付き】

タブごとに指定した時間で自動切り替えする方法

タブごとに指定した時間で自動切り替えする方法を紹介します。このサンプルでは、5つのタブそれぞれに異なる表示時間を設定し、現在表示しているタブに設定された時間が経過すると次のタブへ自動で切り替わります。HTML・CSS・JavaScriptのみで実装し、外部ライブラリは使用しません。

たとえば、タブ1は2秒、タブ2は4秒、タブ3は3秒のように、内容ごとに表示時間を変えられます。短い説明は短時間、長い説明は長めに表示するといった調整ができるため、商品紹介、サービス案内、機能説明、キャンペーン情報など、内容量が異なる複数のタブを順番に見せたい場面で利用できます。最後のタブまで進むと自動切り替えは停止します。

各タブはクリックして手動でも切り替えできます。手動で別のタブを選択した場合は、そのタブに設定された時間を新しく計測し、時間が経過すると次のタブへ進みます。タブ名や表示内容はHTMLから変更でき、CSSでは横幅、余白、背景色、枠線、角丸、選択中のタブの色などを調整できます。JavaScriptでは各タブの表示時間を個別に変更できます。

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

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

デモ

タブごとに表示時間を指定

各タブに設定した時間が経過すると、次のタブへ自動で切り替わります。

タブ1の内容です。このタブは2秒後にタブ2へ切り替わります。

タブ2の内容です。このタブは4秒後にタブ3へ切り替わります。

タブ3の内容です。このタブは3秒後にタブ4へ切り替わります。

タブ4の内容です。このタブは5秒後にタブ5へ切り替わります。

タブ5の内容です。最後のタブなので自動切り替えはここで停止します。

タブ1は2秒、タブ2は4秒、タブ3は3秒、タブ4は5秒表示したあと次のタブへ進み、タブ5で停止します。手動でタブを選択した場合も、そのタブに設定された時間から計測します。「もう一度確認する」を押すとタブ1から再確認できます。

コードをコピーして使おう！

<!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="timed-tabs_wrap">

    <!-- タイトル -->
    <div class="timed-tabs_title">
      タブごとに表示時間を指定
    </div>

    <!-- 説明文 -->
    <p class="timed-tabs_text">
      各タブに設定した時間が経過すると、次のタブへ自動で切り替わります。
    </p>

    <!-- タブ一覧 -->
    <div class="timed-tabs_tabs" role="tablist" aria-label="タブ一覧">

      <!-- タブ1：2秒表示 -->
      <button
        class="timed-tabs_tab is-active"
        id="timed-tabs-1"
        type="button"
        role="tab"
        aria-controls="timed-tabs-panel-1"
        aria-selected="true"
        data-tab="1"
        data-time="2000">
        タブ1
      </button>

      <!-- タブ2：4秒表示 -->
      <button
        class="timed-tabs_tab"
        id="timed-tabs-2"
        type="button"
        role="tab"
        aria-controls="timed-tabs-panel-2"
        aria-selected="false"
        data-tab="2"
        data-time="4000">
        タブ2
      </button>

      <!-- タブ3：3秒表示 -->
      <button
        class="timed-tabs_tab"
        id="timed-tabs-3"
        type="button"
        role="tab"
        aria-controls="timed-tabs-panel-3"
        aria-selected="false"
        data-tab="3"
        data-time="3000">
        タブ3
      </button>

      <!-- タブ4：5秒表示 -->
      <button
        class="timed-tabs_tab"
        id="timed-tabs-4"
        type="button"
        role="tab"
        aria-controls="timed-tabs-panel-4"
        aria-selected="false"
        data-tab="4"
        data-time="5000">
        タブ4
      </button>

      <!-- タブ5：最後のタブ -->
      <button
        class="timed-tabs_tab"
        id="timed-tabs-5"
        type="button"
        role="tab"
        aria-controls="timed-tabs-panel-5"
        aria-selected="false"
        data-tab="5"
        data-time="3000">
        タブ5
      </button>

    </div>

    <!-- タブ1の内容 -->
    <div
      class="timed-tabs_panel is-active"
      id="timed-tabs-panel-1"
      role="tabpanel"
      aria-labelledby="timed-tabs-1"
      data-panel="1">
      タブ1の内容です。このタブは2秒後にタブ2へ切り替わります。
    </div>

    <!-- タブ2の内容 -->
    <div
      class="timed-tabs_panel"
      id="timed-tabs-panel-2"
      role="tabpanel"
      aria-labelledby="timed-tabs-2"
      data-panel="2">
      タブ2の内容です。このタブは4秒後にタブ3へ切り替わります。
    </div>

    <!-- タブ3の内容 -->
    <div
      class="timed-tabs_panel"
      id="timed-tabs-panel-3"
      role="tabpanel"
      aria-labelledby="timed-tabs-3"
      data-panel="3">
      タブ3の内容です。このタブは3秒後にタブ4へ切り替わります。
    </div>

    <!-- タブ4の内容 -->
    <div
      class="timed-tabs_panel"
      id="timed-tabs-panel-4"
      role="tabpanel"
      aria-labelledby="timed-tabs-4"
      data-panel="4">
      タブ4の内容です。このタブは5秒後にタブ5へ切り替わります。
    </div>

    <!-- タブ5の内容 -->
    <div
      class="timed-tabs_panel"
      id="timed-tabs-panel-5"
      role="tabpanel"
      aria-labelledby="timed-tabs-5"
      data-panel="5">
      タブ5の内容です。最後のタブなので自動切り替えはここで停止します。
    </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; /* ページ全体で使用するフォント */
}

/* タブ切り替え全体と内部要素 */
.timed-tabs_wrap,
.timed-tabs_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タブ切り替え全体 */
.timed-tabs_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と外枠の間隔が広がる */
  border:1px solid #e5e7eb; /* 全体を囲む枠線 */
  border-radius:18px; /* 全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  color:#111827; /* 基本文字色 */
}

/* タイトル */
.timed-tabs_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間 */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.timed-tabs_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃えにする */
}

/* タブ一覧 */
.timed-tabs_tabs{
  display:flex; /* タブを横並びにする */
  border-bottom:1px solid #d1d5db; /* タブ下側の境界線 */
}

/* 各タブ */
.timed-tabs_tab{
  flex:1; /* 5つのタブを均等幅にする */
  min-height:52px; /* タブの最低高さ。値を大きくすると高くなる */
  padding:14px 8px; /* 上下14px・左右8pxの内側余白 */
  border:1px solid #d1d5db; /* タブの枠線 */
  border-bottom:none; /* 下側の枠線を削除 */
  border-radius:12px 12px 0 0; /* 上側だけ角丸にする */
  background:#ffffff; /* 通常時の背景色 */
  color:#111827; /* 通常時の文字色 */
  font:inherit; /* ページ全体と同じフォントを使用 */
  font-size:15px; /* タブの文字サイズ */
  font-weight:700; /* タブの文字を太字にする */
  cursor:pointer; /* マウスポインターを指型にする */
  transition:
    background-color .3s ease,
    color .3s ease;
  /*
    0.3秒で背景色と文字色を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

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

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

/* キーボード操作時 */
.timed-tabs_tab:focus-visible{
  position:relative; /* フォーカス枠を前面へ表示する基準 */
  z-index:1; /* 隣接するタブより前面へ表示 */
  outline:3px solid rgba(11,107,255,.22); /* フォーカス時の外枠 */
  outline-offset:2px; /* タブと外枠の間隔 */
}

/* タブ内容 */
.timed-tabs_panel{
  display:none; /* 通常時は非表示 */
  padding:24px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #d1d5db; /* 内容を囲む枠線 */
  border-top:none; /* タブとの境界側の枠線を削除 */
  background:#ffffff; /* 内容の背景色 */
  color:#4b5563; /* 内容の文字色 */
  font-size:16px; /* 内容の文字サイズ */
  line-height:1.8; /* 内容の行間 */
}

/* 選択中のタブ内容 */
.timed-tabs_panel.is-active{
  display:block; /* 選択中の内容を表示 */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォンでは画面端の余白を縮小 */
  }

  /* タブ切り替え全体 */
  .timed-tabs_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

  /* タブ一覧 */
  .timed-tabs_tabs{
    overflow-x:auto; /* 横幅に収まらない場合は横スクロール */
  }

  /* 各タブ */
  .timed-tabs_tab{
    flex:0 0 110px; /* スマートフォンでは各タブの横幅を110pxに固定 */
    min-height:48px; /* 最低高さを48pxへ縮小 */
    padding:12px 8px; /* 内側余白を縮小 */
    font-size:14px; /* 文字サイズを縮小 */
  }

  /* 2個目以降のタブ */
  .timed-tabs_tab + .timed-tabs_tab{
    margin-left:4px; /* タブ同士の間隔を縮小 */
  }

  /* タブ内容 */
  .timed-tabs_panel{
    padding:20px 16px; /* スマートフォンでは内側余白を縮小 */
  }

}

// 全てのタブを取得
const timedTabs=
  document.querySelectorAll(".timed-tabs_tab");

// 全てのタブ内容を取得
const timedPanels=
  document.querySelectorAll(".timed-tabs_panel");

// 現在表示しているタブ番号を保存
let timedCurrentIndex=0;

// 自動切り替え用タイマーを保存
let timedTimer;

// 指定した番号のタブを表示する
function showTimedTab(index){

  // 全てのタブを非選択状態にする
  timedTabs.forEach(function(tab){

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

  });

  // 全てのタブ内容を非表示にする
  timedPanels.forEach(function(panel){

    panel.classList.remove("is-active");

  });

  // 表示するタブを取得
  const activeTab=timedTabs[index];

  // 表示対象を判別する値を取得
  const target=activeTab.dataset.tab;

  // 指定したタブを選択状態にする
  activeTab.classList.add("is-active");
  activeTab.setAttribute("aria-selected","true");

  // 対応する内容を表示
  document
    .querySelector('[data-panel="' + target + '"]')
    .classList.add("is-active");

  // 現在のタブ番号を更新
  timedCurrentIndex=index;

}

// 現在のタブに設定された時間でタイマーを開始する
function startTimedTabTimer(){

  // 既存のタイマーを解除
  clearTimeout(timedTimer);

  // 最後のタブの場合は自動切り替えを停止
  if(timedCurrentIndex>=timedTabs.length-1){
    return;
  }

  // 現在のタブに指定された待機時間を取得
  const waitTime=
    Number(timedTabs[timedCurrentIndex].dataset.time);

  // 指定時間後に次のタブへ切り替える
  timedTimer=setTimeout(function(){

    // 現在の次のタブを表示
    showTimedTab(timedCurrentIndex+1);

    // 次のタブに設定された時間でタイマーを開始
    startTimedTabTimer();

  },waitTime);

}

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

  // タブをクリックしたとき
  tab.addEventListener("click",function(){

    // クリックしたタブを表示
    showTimedTab(index);

    // クリックしたタブに設定された時間から計測を開始
    startTimedTabTimer();

  });

});

// ページ表示後にタブ1の指定時間から自動切り替えを開始
startTimedTabTimer();

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは5つのタブと、それぞれのタブに対応する内容を作成します。CSSではタブ全体の横幅や余白、選択中のタブの色、コンテンツ部分の見た目などを設定します。

JavaScriptでは、現在表示しているタブに設定された時間を取得し、その時間が経過すると次のタブへ自動で切り替えます。各タブには個別の待機時間を設定できるため、タブ1は2秒、タブ2は4秒、タブ3は3秒、タブ4は5秒のように、表示する長さをタブごとに変更できます。

タブは自動で切り替わるだけでなく、クリックして手動で切り替えることもできます。最後のタブへ到達すると自動切り替えは停止するため、最初のタブへ戻って繰り返すループ処理は行いません。

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

各ファイルの役割
index.htmlはタブ全体を構成するファイルです。5つのタブボタンと、それぞれに対応するコンテンツを記述します。タブ名や表示内容を変更できるほか、各タブに設定しているdata-timeの値を変更することで、そのタブを表示する時間を個別に調整できます。

style.cssはタブ全体のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、タブの高さ、文字サイズ、選択中のタブの背景色や文字色、コンテンツ部分の余白などを変更できます。

script.jsはタブの切り替えを制御するファイルです。現在選択されているタブを管理し、data-timeに設定された時間が経過すると次のタブへ自動で切り替えます。また、タブをクリックした場合はクリックしたタブへ手動で切り替え、そのタブに設定された時間から新しく計測を開始します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。

ページを開くと最初のタブから表示が始まり、それぞれのタブに設定された時間が経過するたびに次のタブへ自動で切り替わります。途中で別のタブをクリックすると、そのタブへ手動で切り替えることもできます。最後のタブまで進むと自動切り替えは停止します。

カスタマイズできる内容
index.htmlでは、タブ名、各タブに表示する文章、タブごとの表示時間を変更できます。表示時間は各タブに設定しているdata-timeを編集します。

例えば、次のように設定されているタブは2秒間表示されます。

data-time="2000"

3秒表示する場合はdata-time="3000"、5秒表示する場合はdata-time="5000"へ変更します。各タブの値は独立しているため、タブごとに異なる時間を設定できます。

style.cssでは、タブ全体の横幅や余白、背景色、枠線、角丸、タブの文字サイズ、選択中のタブの色、コンテンツ部分の余白などを変更できます。

数値調整
index.html
data-time="2000"
そのタブを表示してから次のタブへ自動で切り替わるまでの時間です。値はミリ秒で指定し、1000が1秒を表します。

data-time="1000" → 1秒
data-time="2000" → 2秒
data-time="3000" → 3秒
data-time="4000" → 4秒
data-time="5000" → 5秒

例えばタブ2だけを8秒間表示したい場合は、タブ2の値をdata-time="8000"へ変更します。タブ2だけの待機時間が8秒になり、ほかのタブに設定されている時間は変わりません。

JavaScriptでは現在表示しているタブのdata-timeを取得し、その値を自動切り替えまでの待機時間として使用します。そのため、タブごとの表示時間を変更するだけであればscript.jsを編集する必要はありません。index.htmlのdata-timeだけで調整できます。

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

margin:40px auto;
タブ全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
タブ全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
タブ全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

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

padding:14px;
タブボタンの内側余白です。値を大きくするとタブ内の余白が広がります。

margin-left:6px;
隣り合うタブ同士の間隔です。値を大きくするとタブ同士が離れ、小さくすると近くなります。

padding:24px;
タブのコンテンツ部分の内側余白です。値を大きくすると文章と枠線の間隔が広がり、小さくすると狭くなります。

.3s
タブの背景色や文字色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてタブ全体が縮小されます。

また、画面幅640px以下ではメディアクエリを使用し、全体の余白、タブの高さ、タブ内の余白、文字サイズ、コンテンツ部分の余白を小さくしています。5つのタブが画面幅へ収まらない場合はタブ部分を横方向へスクロールできるため、スマートフォン・タブレット・PCで利用できます。