Bootstrapフレームワークでタブを作成する方法｜初心者向けコード解説

はじめに

タブは、限られたスペースを有効活用しながら複数の情報パネルを切り替えて表示できるUI（ユーザーインターフェース）要素です。バインダーや書籍のインデックスタブのように、ページ上の位置を示す目印となり、パネルの中身に応じてラベルが付けられます。タブをクリックすると、そのタブに関連付けられた情報が表示されます。

Bootstrapは、こうしたタブを素早く構築するためのフロントエンドフレームワークです。本記事では、Bootstrapのセットアップ方法、タブが必要になるシーン、そして実際に動作するタブのコード例まで、順を追って解説します。

事前準備：依存パッケージの導入

Webページ上でタブを正しく動作させるには、まず必要な依存パッケージを揃えることから始めます。このプロジェクトでは「Bootstrap」「Popper.js」「jQuery」の3つが必要です。Bootstrap公式サイトのクイックスタートページを参照すれば、導入手順を簡単に確認できます。

パッケージの読み込み方法は自由ですが、最も手軽で初心者におすすめなのは、CDN（コンテンツデリバリーネットワーク）経由でjQuery・Popper.js・Bootstrapを読み込む方法です。その際、<script>タグの記述順序に注意してください。読み込み順序が誤ると正常に動作しないことがあります。

これで準備は完了です！

Bootstrap公式ドキュメントでタブの作り方を確認する

Bootstrap公式の「Introduction / Getting Started」ページを開くと、左側に各項目へ移動できるサイドバーが表示されます。まず「Components」のリンクをクリックしましょう。Bootstrapが提供する数多くのコンポーネントのうち、最初の「Alerts（アラート）」ページへ移動します。この時点でサイドバーの中身も更新され、利用可能な全コンポーネントへのリンクが一覧表示されるようになります。

続いてサイドバーから「Navs」コンポーネントを選択してください。タブを作成するために必要な情報は、ここにまとめられています。

ベースとなるNavから始める

Bootstrapドキュメントに掲載されているコードをそのまま使う場合、まずはページ上部にあるベースのnavから始めます。このコードは、navクラス単体では特別なスタイルが適用されないことを示しています。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

タブ形式にするには、先頭行のclass属性に「nav-tabs」クラスを追加します。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<div> ***** ここにタブのコンテンツがdivとして入ります ***** </div>

見た目上はタブになりましたが、まだクリックしても中身が切り替わる機能はありません。次に、その機能を実装していきましょう。

マークアップにrole属性を追加する

ARIA規格（アクセシビリティに関する標準規格）に準拠するため、各タグにrole属性を追加します。

<ul>には role="tablist" を指定
<a>には role="tab" を指定
各タブのコンテンツを囲む<div>には role="tabpanel" を指定

タブコンテンツを紐付ける属性を追加する

現時点で、リンク部分のコードブロックと、コンテンツ部分のコードブロックは分かれた状態です。これらを連携させるために、いくつかの設定を行いましょう。まずは<ul>側のコードから始めます。

すべての<a>要素にidを付けます。命名は「タブ名 + -tab」が基本です（例：「home」というタブならidは「home-tab」）。また、タブコンテンツを格納する<div>には、対応するタブ名をそのままidとして指定します（homeタブ用のコンテンツならidは「home」）。
各タブのhref属性に、対応するタブコンテンツのidへのリンクを指定します。homeタブの例で言えば、<a>タグのhrefは「#home」となります。
何を切り替えるのかを示すdata-toggle属性を追加します。タブの場合は値を「tab」とします。
最後に、スクリーンリーダーなどの支援技術を利用するユーザーのために、必要なaria属性を加えます。

ここまでの<ul>要素は以下のようになります。

<ul class="nav nav-tabs" role="tablist">
     <li class="nav-item">
       <a id="a-tab" class="nav-link active" role="tab" data-toggle="tab" href="#a">A</a>
     </li>
     <li class="nav-item">
       <a id="b-tab" class="nav-link" role="tab" data-toggle="tab" href="#b">B</a>
     </li>
     <li class="nav-item">
       <a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C</a>
     </li>
     <li class="nav-item">
       <a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D</a>
     </li>
   </ul>

続いて、タブコンテンツ側（tab-content）の実装です。これはリンクを含む<ul>とは別のコードブロックになります。

各タブの中身となるdivは、それら全体を包む外側のdiv（コンテナ）の中に配置します。さらに、内側の各divには、前述のタブ見出しに対応したidを必ず付けてください。
適切なARIA属性を設定します。ここでは「aria-selected」と「aria-labelledby」を使用します。aria-labelledbyには対応するタブ見出しのidを、aria-controlsにはそのdiv自身のidを指定します。
最後にclass属性を追加し、少なくとも「show」クラスを含めます。これは、クリックされたタブに対応するパネルを表示させるためのBootstrapクラスです。「active」は現在表示中のパネルを示し、「fade」を付けるとタブ切り替え時にフェードイン・アウトのアニメーションが適用されます。

タブコンテンツのdivの一例は以下の通りです。

<div class="tab-content" style="padding: 20px;">
     <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
</div>

このコードを参考に、残りのタブコンテンツdivも作成してください。迷ったときは、後述の完成版コードを参照しましょう。

完成版コード全体

以下に、ここまでの内容をすべて組み合わせた完全なコードを示します。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <!-- Bootstrapスタイルシート -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 </head>
 <body>
   <!-- タブ見出し -->
   <ul class="nav nav-tabs" role="tablist">
     <li class="nav-item">
       <a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A</a>
     </li>
     <li class="nav-item">
       <a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B</a>
     </li>
     <li class="nav-item">
       <a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C</a>
     </li>
     <li class="nav-item">
       <a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D</a>
     </li>
   </ul>
   <!-- タブコンテンツ -->
   <div class="tab-content" style="padding: 20px;">
     <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div>
     <div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B</div>
     <div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C</div>
     <div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D</div>
   </div>
   <!-- jQuery CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <!-- Popper.js CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
   <!-- Bootstrap CDN -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
 </body>
</html>

※なお、上記コードはBootstrap 4系（4.5.2）の記法に基づいています。Bootstrap 5以降ではjQueryが不要になり、data-toggleはdata-bs-toggleに変更されているため、利用するバージョンに応じて適宜読み替えてください。

まとめ

お疲れさまでした！Bootstrapを使ってタブナビゲーションコンポーネントを作成できました。慣れてきたら、次はピル型（pill）ナビゲーションの作成にも挑戦してみてください。Happy Coding!

マークアップ言語とは？仕組みと主な種類を初心者向けにわかりやすく解説

Bootstrapフレームワークでモーダルを作成する方法を徹底解説

HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法
HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <
AASM Gemで学ぶRubyステートマシン入門｜Stateデザインパターンから実践的な使い方まで
今回は、ステートマシン（状態遷移マシン）の仕組みと、RubyプロジェクトでAASM gemを使ってステートマシンを活用する方法を解説します。まずは身近な例から考えてみましょう。信号機を想像してください。信号機は「赤」「黄」「青」のいずれかの状態を取ります。そして、色が変わるとき、次に何色になるかは現在の色によって決まっています。ここでは、視覚障害のある方が渡れるタイミングを音で知らせるタイプの信号機だとしましょう。さて、ここからが本題です。あなたがこの信号機のソフトウェアを開発することになったとします。毎回どの音を鳴らすべきか、次はどの色に変わるべきか——それをどう判断すればよ