Bootstrap 5のNavs・Tabs・Pillsとは？初心者でもわかる構造と違いを完全解説

Navs/Tabs/Pillsとは？構造と違いを初心者向けにわかりやすく解説【Bootstrap 5】

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

生徒

「Bootstrapでメニューみたいに切り替わる表示を見たんですが、あれは何ですか？」

先生

「それはNavsやTabs、Pillsと呼ばれる仕組みです。画面の中で項目を切り替えるときによく使われます。」

生徒

「NavsとTabsとPillsって、名前が多くて混乱します……」

先生

「大丈夫です。見た目と使い道を一つずつ整理すれば、すぐ理解できますよ。」

1. BootstrapのNavsとは何かを知ろう

Bootstrap 5のNavsとは、複数の項目を横や縦に並べて表示するための部品です。Webサイトの中で、ページ内リンクやメニューのような役割を持ちます。難しく考えずに言うと、ボタンが横一列に並んでいるイメージです。

Navsは見た目の土台となる存在で、TabsやPillsはNavsの見た目違いだと考えると理解しやすくなります。

2. Navsの基本構造を超シンプルに理解する

Navsは、ulタグとliタグを使ったリスト構造で作られます。Bootstrapでは、このリストに特定のクラスを付けることで、自動的に横並びのナビゲーションになります。


<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">ホーム</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">サービス</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">お問い合わせ</a>
    </li>
</ul>

ブラウザ表示

activeが付いている項目が、今選ばれている状態を表します。初心者の方は「今どこを見ているかを示す印」と覚えてください。

3. Tabsとは何かを初心者向けに説明

Tabsは、Navsにタブ風の見た目を加えたものです。パソコンのフォルダやブラウザのタブを思い浮かべると分かりやすいです。クリックすると表示内容が切り替わるUIとして使われます。


<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">タブ1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">タブ2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">タブ3</a>
    </li>
</ul>

ブラウザ表示

nav-tabsというクラスを追加するだけで、タブのようなデザインになります。これがBootstrapの便利なところです。

4. Pillsとは何かをイメージで理解しよう

Pillsは、丸みを帯びたボタンのような見た目をしたナビゲーションです。薬のカプセルの形に似ていることから、この名前が付いています。スマホ向けのデザインや、やわらかい印象を出したいときに使われます。


<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">ピル1</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">ピル2</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">ピル3</a>
    </li>
</ul>

ブラウザ表示

Tabsとの違いは、見た目だけです。構造や使い方はほとんど同じなので安心してください。

5. Navs・Tabs・Pillsの違いを一気に整理

ここで一度、違いを整理しましょう。Navsは基本の形、Tabsは上に線が付いたタブ風、Pillsは丸みのあるボタン風です。中身の仕組みは同じで、見た目を変えているだけです。

初心者の方は「どれを使うか迷ったら、見た目で選んでOK」と覚えておくと楽になります。

6. 縦並びナビゲーションの考え方

Navsは横並びだけでなく、縦並びにもできます。サイドメニューのようなレイアウトを作るときに便利です。


<ul class="nav flex-column nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">メニューA</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">メニューB</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">メニューC</a>
    </li>
</ul>

ブラウザ表示

flex-columnは「縦に並べる」という意味です。英語が苦手でも、縦＝columnと覚えるだけで大丈夫です。