Bootstrap 5 のナビゲーション入門：Navbar・タブ・ピルの違いと実装例

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

生徒

「ホームページの上のメニューみたいな部分って、どうやって作るんですか？」

先生

「あれは『ナビゲーションバー（Navbar）』と呼ばれるもので、Bootstrap 5で簡単に作れますよ。」

生徒

「他にも、タブやピルっていうのも聞いたことあります… それって何が違うんですか？」

先生

「それぞれ使いどころが違うんです。Navbar・タブ・ピルの違いと作り方を一緒に見ていきましょう！」

1. ナビゲーションとは？ページ内の移動に使う重要なパーツ

ナビゲーションとは、Webサイトで他のページやセクションに移動するための案内ボタンのことです。訪問者がどこに何があるかを理解しやすくするために、とても大切な役割を持ちます。

Bootstrap 5では、ナビゲーションバー（Navbar）、タブ（Tabs）、ピル（Pills）という3つのスタイルが用意されていて、それぞれ用途や見た目が異なります。

2. Navbarの作り方：ホームページの上部に使うメニュー

Navbar（ナビバー）は、ホームページの一番上に表示されるメニューで、ロゴやリンク、検索フォームなどを配置できます。


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ロゴ</a>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <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>
  </div>
</nav>

ブラウザ表示

3. タブとは？切り替え可能なコンテンツ表示

タブとは、クリックすると中身（コンテンツ）が切り替わる仕組みです。例えば、「商品紹介」「レビュー」「Q&A」などの情報を一画面でまとめて表示するのに使われます。


<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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>

ブラウザ表示

4. ピルとは？丸みを帯びたやさしいデザインのナビ

ピルは、見た目がやさしく丸くなったナビゲーションのスタイルです。nav-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>

ブラウザ表示

5. タブとピルの違いを見比べてみよう

タブとピルは、どちらも似たような構造ですが、デザインが違うだけです。タブは四角く、ピルは丸みがあり、どちらを使っても使い方はほとんど同じです。

以下はタブとピルを並べた比較例です。


<!-- タブ -->
<ul class="nav nav-tabs mb-3">
  <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>
</ul>

<!-- ピル -->
<ul class="nav 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>
</ul>

ブラウザ表示

6. ナビゲーションの基本スタイルを一覧で確認しよう

Bootstrap 5では、ナビゲーション関連のクラスがいくつか用意されています。ここで使った主なクラスを表にまとめました。

navbar：ナビゲーションバーを作るときに使う
nav：タブやピルのベースになるクラス
nav-tabs：タブのデザインを適用
nav-pills：ピル（丸みのあるボタン）に変更
nav-link：リンクの見た目を整える

このように、Bootstrap 5ではナビゲーションに関する機能がとても充実しています。ナビゲーションバー・タブ・ピルを使い分けることで、見た目も使いやすさもアップします。

まとめ

Bootstrapを活用したナビゲーション作成は、初心者でも直感的に理解しやすく、実際のWebサイト制作においてもとても重要な役割を果たします。今回の記事では、ナビゲーションバー、タブ、ピルといった三つの代表的なスタイルを比較し、それぞれの使いどころを丁寧に確認しながら、実際のコード例を通して使い方を学んできました。とくに、画面上部に設置されるナビゲーションバーは、訪問者がサイト内を迷わずに移動するための要であり、ロゴやメニューの配置、背景色の扱いなど、細かな部分が全体の印象を左右します。Bootstrapのクラスを正しく組み合わせることで、シンプルで洗練されたデザインを短時間で構築できる点は、多くの開発者に支持される理由のひとつです。また、タブ形式のナビゲーションは、情報量が多いページでもコンパクトに整理でき、閲覧者にとっても必要な情報をすぐに切り替えながら確認できるため、商品紹介やレビュー、よくある質問など幅広い用途に対応できます。一方で、ピルは丸みを帯びた優しいデザインが特徴で、落ち着いた雰囲気のサイトや視覚的に柔らかさを出したい場面で適しています。同じ構造を持ちながら見た目だけが異なるため、目的に応じた選択がしやすく、デザインの幅を広げることができます。ナビゲーションを実装する際に意識しておきたいのは、単に見た目を整えるだけでなく、訪問者が迷わずに操作できる明確さと、画面サイズによって崩れない安定性です。Navbarでは横幅の変化に対応するために、折り畳み構造を用いるケースも多く、Bootstrapが標準で備える拡張機能を理解しておくことで、スマートフォンでも快適な操作性を保つことができます。タブやピルにおいても、クラスの組み合わせやアクティブ状態の管理が読みやすさに直結するため、基本的なルールを押さえておくことがとても重要です。以下に、今回学んだ内容を応用した簡単なサンプルコードを示します。複数のナビゲーション手法を組み合わせ、コンパクトで扱いやすいレイアウトとしてまとめています。

サンプルコード：Navbar・タブ・ピルを組み合わせた例


<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">サイト名</a>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <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>
  </div>
</nav>

<ul class="nav nav-tabs mb-3">
  <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>
</ul>

<ul class="nav 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>
</ul>

ブラウザ表示

このように、Bootstrapが提供するナビゲーションの仕組みを正しく理解すると、Webサイトの構造をより明確に整理でき、訪問者が求めている情報へ自然に誘導することができます。ナビゲーションはページ構成の中心であり、視覚的なデザインだけではなく使いやすさそのものを支える大切な要素です。特に、初心者のうちからクラスの意味や階層構造に慣れておくことで、後に複雑なページを作成するときにも役立ちます。今回学んだNavbar、タブ、ピルは、それぞれ用途も見た目も異なるため、どの場面でどの構造が最適なのかを意識しながら使い分けると、洗練されたレイアウトを実現しやすくなります。また、ナビゲーションの実装では、リンクの配置、アクティブ状態の明確化、余白の取り方など、細かな調整が全体の印象に大きく影響するため、丁寧に確認しながら進めることが大切です。Bootstrapのシンプルな構造は学習しやすい反面、使い方を誤ると意図しない表示になることもあるため、実際にブラウザで確認する習慣を付けることで、より理解が深まり実践的なスキルが身に付きます。今回の内容を丁寧に復習しながら、複数のナビゲーションスタイルを組み合わせることで、ページ全体のまとまりが高まり、より魅力的なサイトを構築できるようになります。

先生と生徒の振り返り会話

生徒：今日はNavbarとタブとピルの違いがよく分かりました。どれも同じように見えて、ちゃんと使い分けがあるんですね。

先生：その通りだよ。特にNavbarはサイト全体の入り口になる部分だから、構造を理解しておくと制作がぐっと楽になるんだ。

生徒：タブとピルは、用途が似ているのに見た目だけ変えられるのが便利ですね。組み合わせても使いやすそうです。

先生：デザインに合わせて選べるのがBootstrapの良いところだね。実際のサイトでもよく使われているよ。

生徒：今日のサンプルも参考になりました。実際に動かしてみて、どんな風に切り替わるのか試してみます。

先生：ぜひ試してみてね。自分で触って確かめることが、上達する一番の近道なんだよ。