Bootstrap5のタブ切替を完全解説！ナビゲーション・タブ・ピルの使い方を初心者向けにやさしく理解

タブ切替の実装（data-bs-toggle="tab"）と必要な属性・クラスまとめ

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのタブって、クリックすると表示が切り替わるやつですよね？どうやって作るんですか？」

先生

「Bootstrap5では、決まった属性とクラスを付けるだけで、タブ切替が簡単に作れます。」

生徒

「プログラミング未経験でもできますか？」

先生

「大丈夫です。ボタンに名前札を付けて、表示したい箱とひも付けする感覚で覚えましょう。」

1. Bootstrapのタブ切替とは何か

Bootstrapのタブ切替とは、画面の上にあるボタンをクリックすると、下の表示内容が入れ替わる仕組みです。スマートフォンの設定画面や、商品の説明ページなどでよく使われています。

難しく聞こえますが、実際には「押す場所」と「表示される箱」を対応させているだけです。Bootstrap5では、この動きをJavaScriptを自分で書かなくても実現できます。

2. ナビゲーション・タブとピルの違い

Bootstrapには、見た目が少し違う二つの切替方法があります。それがナビゲーション・タブとピルです。

ナビゲーション・タブは、ブラウザのタブのように四角い形をしています。一方ピルは、カプセルのように丸みのある見た目です。使い方は同じで、見た目だけが違います。

3. タブ切替に必要な基本クラス

タブ切替を作るには、いくつか決まったクラスを使います。まず全体をまとめる入れ物に、ナビゲーション用のクラスを付けます。

そして、クリックする部分には専用のクラスを付け、表示される内容側にも対応するクラスを設定します。これにより、Bootstrapが自動で切替を判断します。

4. data属性でタブを切り替える仕組み

data属性とは、HTMLタグに追加できるメモのようなものです。Bootstrapでは、このメモを使って動きを指定します。

data-bs-toggleには「これはタブを切り替えるボタンです」という意味があります。さらに、表示したい場所の名前を指定することで、正しい内容が表示されます。

5. シンプルなタブ切替の実装例


<ul class="nav nav-tabs">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">タブ1</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2">タブ2</button>
    </li>
</ul>

<div class="tab-content border p-3">
    <div class="tab-pane fade show active" id="tab1">
        タブ1の内容です
    </div>
    <div class="tab-pane fade" id="tab2">
        タブ2の内容です
    </div>
</div>

ブラウザ表示

6. ピル形式のタブ切替例


<ul class="nav nav-pills">
    <li class="nav-item">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#pill1">概要</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pill2">詳細</button>
    </li>
</ul>

<div class="tab-content mt-3">
    <div class="tab-pane fade show active" id="pill1">
        概要の説明です
    </div>
    <div class="tab-pane fade" id="pill2">
        詳細の説明です
    </div>
</div>

ブラウザ表示