Bootstrapのナビゲーション完全入門！.nav・.nav-tabs・.nav-pillsの基本使い方を初心者向けに徹底解説

.nav・.nav-tabs・.nav-pills の基本使い方とHTMLサンプル

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

生徒

「Bootstrapでメニューみたいな横並びのリンクを作りたいんですが、難しいですか？」

先生

「Bootstrapにはナビゲーションという便利な仕組みが用意されています。」

生徒

「ナビゲーションって、サイトの上にあるメニューのことですか？」

先生

「その通りです。.navや.nav-tabs、.nav-pillsを使えば、初心者でも簡単に作れます。」

1. Bootstrapのナビゲーションとは何か

Bootstrapのナビゲーションとは、ページ移動用のリンクを整理して表示するための仕組みです。Webサイトでは、トップページやお問い合わせページなど、移動先をわかりやすくまとめる必要があります。Bootstrapでは、この役割を.navクラスが担当します。

パソコンで例えると、ナビゲーションは本の目次のような存在です。どこに何が書いてあるか、一目でわかるように並べてくれます。

2. .navクラスの基本構造を理解しよう

.navはBootstrapナビゲーションの土台です。ulタグとliタグを使い、リンクを横並びにするのが基本です。難しく見えますが、箇条書きを横に並べるイメージで大丈夫です。


<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>

ブラウザ表示

3. nav-itemとnav-linkの役割

nav-itemは一つ一つの項目を入れる箱です。nav-linkは実際にクリックできる文字部分を表します。お弁当箱と中のおかずのような関係だと考えると理解しやすくなります。

activeを付けると、今開いているページだと利用者に伝えることができます。これにより、どこを見ているのか迷いにくくなります。

4. .nav-tabsでタブ型メニューを作る

.nav-tabsを使うと、ファイルの見出しのようなタブ表示になります。設定方法は簡単で、.navに.nav-tabsを追加するだけです。


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

ブラウザ表示

5. .nav-pillsでボタン風ナビゲーション

.nav-pillsは、ボタンのように丸みのあるデザインが特徴です。見た目がやわらかく、スマートフォン向けの画面とも相性が良いです。


<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">ログイン</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">新規登録</a>
    </li>
</ul>

ブラウザ表示

6. 縦並びナビゲーションの作り方

ナビゲーションは横並びだけでなく、縦にも並べられます。classにflex-columnを追加すると、メニューが上から下に並びます。これはサイドメニューでよく使われます。


<ul class="nav nav-pills flex-column">
    <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>

ブラウザ表示

7. disabledでクリックできない状態を表す

nav-linkにdisabledを付けると、使えないメニューを表現できます。準備中や権限がない場合などに便利です。色が薄くなり、押せないことが見た目で伝わります。


<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">利用可能</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">準備中</a>
    </li>
</ul>

ブラウザ表示