Bootstrapでアイコン付きタブ・ピルを作る方法を徹底解説！Bootstrap5とBootstrap Iconsの使い方入門

1. Bootstrapのタブとピルとは何か

1. Bootstrapのタブとピルとは何か

Bootstrapとは、ホームページを簡単にきれいに作るための便利な道具箱のようなものです。ナビゲーションとは、ページの中を移動するためのメニューのことです。タブは、ノートの見出しのように横に並ぶ切り替えボタンです。ピルは、丸みのあるボタン型のナビゲーションです。

アイコン付きタブやアイコン付きピルを使うと、文字だけよりも直感的に内容が伝わります。たとえば家のマークがあればホーム画面だとすぐ分かります。これがBootstrap Iconsの役割です。

2. Bootstrap Iconsの基本的な使い方

2. Bootstrap Iconsの基本的な使い方

Bootstrap Iconsとは、Bootstrap公式のアイコン集です。アイコンとは小さな絵のことです。文字の横に表示することで、意味を視覚的に伝えられます。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-house"></i> ホーム
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-person"></i> プロフィール
    </a>
  </li>
</ul>

iタグの中にbiとアイコン名を書くことで表示されます。bi-houseは家のマーク、bi-personは人のマークです。これだけでアイコン付きタブが完成します。

3. アイコン付きタブの切り替え機能を作る

3. アイコン付きタブの切り替え機能を作る

タブは見た目だけでなく、クリックすると内容が切り替わる仕組みがあります。これはdata属性という設定を使います。属性とは、タグに追加する情報のことです。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home">
      <i class="bi bi-house"></i> ホーム
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile">
      <i class="bi bi-person"></i> プロフィール
    </button>
  </li>
</ul>

<div class="tab-content mt-3">
  <div class="tab-pane fade show active" id="home">
    ホームの内容です。
  </div>
  <div class="tab-pane fade" id="profile">
    プロフィールの内容です。
  </div>
</div>

data-bs-toggleは切り替えを有効にする合図です。data-bs-targetはどの内容を表示するかを指定します。idと対応させることが大切です。

4. アイコン付きピルナビゲーションの作り方

4. アイコン付きピルナビゲーションの作り方

ピルはnav-pillsというクラスを使います。丸みがあるため、やわらかい印象になります。ボタンのように見せたいときに便利です。

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-chat"></i> メッセージ
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-gear"></i> 設定
    </a>
  </li>
</ul>

nav-tabsをnav-pillsに変えるだけで見た目が変わります。Bootstrap5ではクラス名を覚えるだけでデザインを簡単に変更できます。

5. 縦並びのアイコン付きピルを作る

5. 縦並びのアイコン付きピルを作る

ナビゲーションは横並びだけではありません。縦に並べることもできます。サイドメニューのようなデザインになります。

<ul class="nav nav-pills flex-column" style="width:200px;">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-speedometer2"></i> ダッシュボード
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-folder"></i> ファイル
    </a>
  </li>
</ul>

flex-columnというクラスを追加すると縦方向に並びます。管理画面やマイページでよく使われるデザインです。

6. アイコンと文字の間隔を整える方法

6. アイコンと文字の間隔を整える方法

アイコンと文字がくっつきすぎると読みにくくなります。Bootstrapには余白を調整するクラスがあります。me-1は右側に少し余白をつけるという意味です。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-star me-1"></i> お気に入り
    </a>
  </li>
</ul>

meは右方向の余白を意味します。数字が大きいほど余白が広くなります。細かい調整ができることがBootstrapの強みです。

7. 画像と組み合わせたタブデザイン

7. 画像と組み合わせたタブデザイン

アイコンだけでなく画像も組み合わせることができます。商品紹介やギャラリー表示などに活用できます。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <img src="/img/sample120-120.jpg" width="20" class="me-1">
      商品一覧
    </a>
  </li>
</ul>

小さな画像を使うことで、視覚的に分かりやすいナビゲーションになります。BootstrapナビゲーションタブやBootstrapピルと組み合わせることで、より実用的なデザインになります。

まとめ

まとめ

今回はBootstrapでアイコン付きタブやアイコン付きピルを作る方法について基礎から丁寧に確認しました。Bootstrapとは何かという基本から始まり、ナビゲーションとはどのような役割を持つのか、タブとピルの違いは何か、そしてBootstrap Iconsの使い方まで一つずつ整理しました。Bootstrap5ではnav nav-tabsやnav nav-pillsというクラスを使うだけで、見やすいナビゲーションメニューを簡単に作成できます。さらに、biというクラスとアイコン名を組み合わせることで、ホームやプロフィール、設定やメッセージなどの意味を視覚的に伝えることができます。

アイコン付きタブは、単なる文字だけのメニューよりも直感的で分かりやすく、利用者の操作性を高めます。特に管理画面やマイページ、ダッシュボードなどでは、視覚的な目印があることで使いやすさが大きく向上します。Bootstrapナビゲーション、Bootstrapタブ切り替え、Bootstrapピルデザイン、Bootstrap Icons使い方などの基本を理解しておくことで、さまざまな場面に応用できます。

また、data属性を活用することで、クリック時に内容を切り替えるタブ機能も実装できました。data bs toggleやdata bs targetを正しく設定し、idと対応させることが重要です。見た目だけでなく動きも伴ったナビゲーションを実装できる点がBootstrap5の大きな魅力です。

さらに、flex columnを使った縦並びナビゲーションや、me 1などの余白調整クラスを活用することで、細かなデザイン調整も可能です。アイコンと文字の間隔を整えることで、読みやすく整ったデザインになります。画像と組み合わせたタブデザインも紹介しましたが、商品一覧やカテゴリーメニューなどにも応用できます。

以下に、これまでの内容を整理したサンプルプログラムをまとめます。Bootstrap5とBootstrap Iconsを組み合わせたアイコン付きタブの総合例です。

<ul class="nav nav-tabs" id="summaryTab" role="tablist">
  <li class="nav-item">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-home">
      <i class="bi bi-house me-1"></i> ホーム
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-user">
      <i class="bi bi-person me-1"></i> ユーザー
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-setting">
      <i class="bi bi-gear me-1"></i> 設定
    </button>
  </li>
</ul>

<div class="tab-content mt-3">
  <div class="tab-pane fade show active" id="tab-home">
    ホームの内容を表示します。
  </div>
  <div class="tab-pane fade" id="tab-user">
    ユーザー情報を表示します。
  </div>
  <div class="tab-pane fade" id="tab-setting">
    設定画面を表示します。
  </div>
</div>

このように、Bootstrap タブ 作り方やBootstrap ピル 使い方を理解しておくことで、実務でもすぐに活用できるナビゲーションを実装できます。基本構造はとてもシンプルですが、クラスの意味を正しく理解することが大切です。Bootstrap5 ナビゲーションデザインやBootstrap Icons アイコン一覧を確認しながら、ぜひ自分なりのデザインに発展させてみてください。