「Bootstrap」メニューバーのレイアウトを簡単に整える「Navコンポーネント」についてご紹介します。

TOP
コラム
「Bootstrap」メニューバーの

Bootstrapとは、オープンソースのCSSフレームワークで、レスポンシブデザインを簡単な記述で実現できる便利なフレームワークです。
今回はそんなBootstrapで、Webページのメニューバーのレイアウトを決定する「Nav」についてご紹介いたします。
なお、Bootstrapの導入は済んでいるものとします。

Navについて

Webページが複数集合したものをWebサイトといいますが、小さなサイトでも数ページ、大規模なサイトですと数十から数百ページになるものもあります。
これらのページをスムーズに遷移するにはナビゲーション機能、メニューバーは重要です。

Bootstrapでは、「nav」というクラスにメニューバー関連のスタイルがまとめられています。
メニューバーとして扱いたい部分に、「class="nav"」と、つけてやるだけで、ある程度見た目を整えることができます。


     <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h1>ナビゲーションメニュー</h1>
                </div>
              </div>
            <div class="row m-3">
            <div class="col-sm-12">
            <nav class="nav">
                <a class="nav-link" href="#">Nav1</a>
                <a class="nav-link" href="#">Nav2</a>
                <a class="nav-link" href="#">Nav3</a>
                <a class="nav-link" href="#">Nav4</a>
                <a class="nav-link" href="#">Nav5</a>
                </nav>
            </div>
            </div>
          </div>

上記のコードをブラウザで見てみると、メニューバーが横一列になっています。
なお、「<ul>」でメニューバーを記述することもあることでしょう。
そんな時は「<ul class="nav">」とし、「<li>」の方には「<li class="nav-item">」と記述しましょう。

タブ表示

横に並べるだけでは、何がすごいのかよくわからないかもしれません。
次は、よくメニューバーに利用される「タブ表示」にしてみましょう。

タブ表示にするには「nav-tabクラス」を使用します。
「nav class="nav nav-tab"」といったように、クラス名を追加してみましょう。


<nav class="nav nav-tab">
    <a class="nav-link active" href="#">Nav1</a>
    <a class="nav-link" href="#">Nav2</a>
    <a class="nav-link" href="#">Nav3</a>
    <a class="nav-link" href="#">Nav4</a>
    <a class="nav-link" href="#">Nav5</a>
</nav>

Nav1のクラス名に注目してください。「active」というクラスが入っていますが、「active」をつけたクラスは「選択済み状態」となります。
タブの中でNav1がデフォルトで選択されているという指定です。

ピル型ボタン

アクティブなタブを塗りつぶして表示するには「nav-pills」を使用します。


<nav class="nav nav-pills">
    <a class="nav-link active" href="#">Nav1</a>
    <a class="nav-link" href="#">Nav2</a>
    <a class="nav-link" href="#">Nav3</a>
    <a class="nav-link" href="#">Nav4</a>
    <a class="nav-link" href="#">Nav5</a>
</nav>

メニューバーをコンテンツ幅いっぱに表示

コンテンツ幅内に均等に各リンクを表示したい時は「nav-fill」を指定します。


<nav class="nav nav-pills nav-fill">
    <a class="nav-link nav-item active" href="#">Nav1</a>
    <a class="nav-link nav-item" href="#">Nav2</a>
    <a class="nav-link nav-item" href="#">Nav3</a>
    <a class="nav-link nav-item" href="#">Nav4</a>
    <a class="nav-link nav-item" href="#">Nav5</a>
</nav>

「nav-fill」を使用するとコンテンツ幅に均等に表示され、なおかつ、画面幅にそって表示がちょうどよく伸縮します。
この「nav-fill」ですが、子要素に「nav-itemクラス」を割り当てておかなければ機能しません。
しかし、「nav-link」でなければ、「nav-pills」は機能しません。
「nav-pills」と「nav-fill」を併用したい時は、「nav-link」と「nav-item」をどちらも子要素に記述することで解決できます。

NavBar

Navによって作られるメニューバーはとても単純なものでしたが、「NavBar」を使用することで、よりメニューバーらしい形に仕上げることができます。
NavBarを使用する目的として最も重要なのが「項目の折り畳み機能」です。
よくあるメニューバーをクリックすると、隠れていたメニューが表示されるアレです。
「NavBar」を用いた折り畳みメニューを作成するには少し複雑な記述が必要ですので、またの機会にご紹介させていただきます。

最後に

Bootstrapを用いたメニューバーの作成についてご紹介しました。
Bootstrapは、こういったクラスがある、ということを知っておけば知っておくほど作業効率やバリエーションが増えます。
日頃からBootstrapを用いたコーディングを行っていくと自然と覚えていきますので、積極的に利用していきましょう。