【Webデザイン】タブ機能の実装方法をサンプルコード付きで解説

公開：2024年9月10日更新：2025年11月6日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

Webサイトを設計する際、限られたスペースに多くの情報を整理して、表示する必要に迫られることがあります。特にポータルサイトやショッピングサイトでは、カテゴリ別や地域別に情報を分類し、ユーザーが必要な情報だけを選んで閲覧できる仕組みが求められます。Webデザインのタブは、こうした要求に応える効果的なUI要素として、多くのWebサイトで採用されています。

しかし、タブをWebサイトに実装する方法は複数存在し、それぞれに特徴やメリット、注意点があります。実装方法を誤ると、ページの読み込み速度が低下したり、ユーザーにとって使いにくいインターフェースになる可能性があります。

この記事では、Webデザインのタブの基本的な概念から、HTML+CSS+JavaScriptを使った実装方法、BootstrapやjQuery プラグインを活用した実装方法、さらに実装時の注意点など、Webデザインにおけるタブ機能について詳しく解説していきます。

Webデザインのタブとは
Webデザインのタブの特徴
Webデザインのタブが使われる場面
Webデザインのタブのメリット
Webデザインのタブの実装方法
HTML+CSS+JavaScriptでの実装
Bootstrapでの実装
jQueryプラグインでの実装
Webデザインのタブを実装する際の注意点
情報の詰め込みすぎに注意
JavaScriptが無効な環境への対応
レスポンシブデザインへの対応

Webデザインのタブとは

Webデザインのタブとは、Webサイトのページ内で、複数のコンテンツを切り替えて表示するUI要素のことです。ユーザーがタブをクリックすると、ページ全体を再読み込みすることなく、指定された範囲の表示内容がその場で瞬時に切り替わります。

情報をカテゴリ別や分野別に整理して表示したい場合に有効な手法であり、ニュースサイトやECサイトなど、多くのWebサイトで活用されています。

Webデザインのタブの特徴

タブの見た目としては、ページ上部に横並びで配置される長方形のボタンとして表示されます。クリックされたタブだけが強調表示される為、情報を整理して見やすくする目的で使われています。

Webデザインのタブが持つ主な特徴は以下の通りです。

ページ移動なしで表示内容を切り替えられる
狭い領域にたくさんの情報を掲載できる
タブの切り替えが一瞬で完了する
選択中のタブが視覚的に明確になる

タブ内の情報は最初からHTML内に含まれているため、サーバーから都度読み込む必要がなく、表示の切り替えに時間がかかりません。また、JavaScriptやCSSを使ってタブの「見た目」や「動作」をカスタマイズできるため、サイトのデザインに合わせた実装が可能です。

Webデザインのタブが使われる場面

タブは複数のカテゴリやセクションに分かれた情報を、1つのページ内で提供したい場合に適しています。ユーザーが興味のある情報だけを選んで閲覧できるため、情報の探しやすさが向上します。

タブが効果的に使われる代表的な場面は、以下の通りです。

ニュースサイトでジャンル別に記事を表示する
ECサイトで商品の詳細情報をセクション別に分ける
ポータルサイトでカテゴリ別に情報を整理する
企業サイトでサービス内容を種類別に説明する
プラグイン設定画面で設定項目をグループ化する

例えば、Yahoo! JAPANのトップページでは、ニュースをカテゴリ別にタブで切り替えられるようになっている為、ユーザーは興味のあるジャンルのニュースだけを素早く閲覧できます。また、ECサイトでは商品の説明や仕様、レビューなどをタブで分けることで、ページが長くなりすぎるのを防いでいます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

Webデザインのタブのメリット

タブを導入することによって、限られた画面スペースを有効活用しながら、多くの情報を整理して提供できます。タブがない場合、すべての情報を縦に並べて表示することになり、ページが非常に長くなってしまいます。

タブを使うことで得られる主なメリットは、以下の通りです。

ページをすっきり整理できる
ユーザーが必要な情報に素早くアクセスできる
情報の優先順位を視覚的に示せる
ページのスクロール量を減らせる
モバイル端末でも情報を見やすく整理できる

特にモバイル端末では画面サイズが限られているため、タブを活用することでユーザビリティが大幅に向上します。また、情報が整理されていることで、ユーザーが目的の情報を見つけやすくなり、サイト全体の使いやすさが高まります。

Webデザインのタブの実装方法

Webサイトにタブ機能を実装する方法は、基本的に以下3つが挙げられます。それぞれの方法には特徴があり、プロジェクトの要件や開発環境に応じて選択することが重要です。

HTML+CSS+JavaScriptでの実装
Bootstrapでの実装
jQueryプラグインでの実装

これらの実装方法を理解することで、自分のWebサイトに最適なタブ機能を選択し、効率的に実装できるようになります。それではタブの実装方法について、具体的に解説していきます。

HTML+CSS+JavaScriptでの実装

タブ機能を実装する基本的な方法は、HTMLで構造を作り、CSSで見た目を整え、JavaScriptで切り替え動作を制御することです。コードの記述量は多くなりますが、動作が明確で理解しやすく、カスタマイズの自由度が高いという利点があります。

HTML+CSS+JavaScriptでの実装手順は、以下の通りです。

HTMLでタブのボタン部分とコンテンツ領域を作成
CSSでタブのデザインとレイアウトを設定
JavaScriptでタブのクリックイベントを設定
クリックされたタブのコンテンツだけを表示する処理を記述

以下は、HTML+CSS+JavaScriptでタブを実装する基本的なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
  <style>
    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
    }
    .tab button:hover {
      background-color: #ddd;
    }
    .tab button.active {
      background-color: #ccc;
    }
    .tabcontent {
      display: none;
      padding: 6px 24px;
      border: 1px solid #ccc;
      border-top: none;
    }
  </style>
</head>
<body>

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">タブ1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">タブ2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">タブ3</button>
</div>

<div id="tab1" class="tabcontent">
  <h3>タブ1の内容</h3>
  <p>タブ1に表示される内容です。</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>タブ2の内容</h3>
  <p>タブ2に表示される内容です。</p>
</div>

<div id="tab3" class="tabcontent">
  <h3>タブ3の内容</h3>
  <p>タブ3に表示される内容です。</p>
</div>

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>

</body>
</html>

上記のコードでは、HTMLでタブボタンとコンテンツ領域を作成し、CSSでスタイルを設定しています。JavaScriptのopenTab関数は、クリックされたタブに対応するコンテンツを表示し、他のコンテンツを非表示にする処理を行います。

外部ライブラリやフレームワークに依存しないため、既存のWebサイトにも導入しやすく、ページの読み込み速度への影響も最小限に抑えられます。

Bootstrapでの実装

Bootstrapは、レスポンシブデザインに対応したCSSフレームワークであり、タブ機能も標準で提供されています。Bootstrapを使えば、あらかじめ用意されたクラス名をHTMLに指定するだけで、簡単にタブを実装できます。

Bootstrapでタブを実装する際の手順は、以下の通りです。

BootstrapのCSSとJavaScriptファイルを読み込む
HTMLにBootstrapのタブ用クラスを指定
nav-tabsクラスでタブボタンを作成
tab-contentクラスでコンテンツ領域を作成

以下は、Bootstrapを使ってタブを実装する基本的なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab">タブ1</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab">タブ2</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab">タブ3</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel">
    <h3>タブ1の内容</h3>
    <p>タブ1に表示される内容です。</p>
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel">
    <h3>タブ2の内容</h3>
    <p>タブ2に表示される内容です。</p>
  </div>
  <div class="tab-pane fade" id="tab3" role="tabpanel">
    <h3>タブ3の内容</h3>
    <p>タブ3に表示される内容です。</p>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

上記のコードでは、BootstrapのCDNからCSSとJavaScriptを読み込み、nav-tabsクラスとtab-contentクラスを使ってタブを作成しています。CSSやJavaScriptを自分で書く必要がほとんどなくなり、短時間で実装できます。また、レスポンシブデザインに標準で対応しているため、スマートフォンやタブレットでも適切に表示されます。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

jQueryプラグインでの実装

jQueryプラグインを活用すれば、短いコードで高機能なタブを簡単に実装できます。特にレスポンシブ対応やアニメーション効果など、高度な機能が必要な場合に有効な方法です。代表的なプラグインには「Easy Responsive Tabs」や「jQuery UI Tabs」などがあります。

jQueryプラグインを使う際の手順は、以下の通りです。

jQueryライブラリを読み込む
タブプラグインのCSSとJavaScriptファイルを読み込む
HTMLでタブの構造を作成
JavaScriptでプラグインを初期化

以下は、jQuery UI Tabsを使ってタブを実装する基本的なサンプルコードです。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tab1">タブ1</a></li>
    <li><a href="#tab2">タブ2</a></li>
    <li><a href="#tab3">タブ3</a></li>
  </ul>
  <div id="tab1">
    <h3>タブ1の内容</h3>
    <p>タブ1に表示される内容です。</p>
  </div>
  <div id="tab2">
    <h3>タブ2の内容</h3>
    <p>タブ2に表示される内容です。</p>
  </div>
  <div id="tab3">
    <h3>タブ3の内容</h3>
    <p>タブ3に表示される内容です。</p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
  $("#tabs").tabs();
});
</script>

</body>
</html>

上記のコードでは、jQueryとjQuery UIのライブラリを読み込み、HTMLでタブの構造を作成した後、JavaScriptで.tabs()メソッドを呼び出して、プラグインを初期化しています。jQueryプラグインを使うことで、SP表示の時に、タブがアコーディオン形式に自動で切り替わるなど、レスポンシブ対応も容易になります。また、フェードイン・フェードアウトなど、アニメーション効果も簡単に追加できます。