最終更新日: 2019/08/08

Bootstrap4を導入してナビゲーションを作ってみよう

今回はTwitterが開発したBootstrapの最新版であるBootstrap4の導入方法と新機能として追加された「navbar-toggler」を活用したナビゲーションのサンプルを紹介します。

Web開発用のデザインフレームワークとして非常に人気の高いBootstrap4は世界中のモダンでおしゃれなWebサイトがフレームワークとして採用しています。

簡単な設定でレスポンシブ対応の魅力的なナビゲーションを作ることができるので、是非参考にしてみてください。

この記事を読んで分かること

Bootstrap4の導入方法
新機能「navbar-toggler」の設定例
ナビゲーションで書くコード

1 導入方法
2 ナビゲーションの作り方
3 まとめ

導入方法

まず公式サイトにアクセスしてBootstrap4をダウンロードします。
トップページ中央にある「Get started」をクリックしてください。

Bootstrap公式サイト

次に画面左側にある「Download」をクリックします。

Downloadページ中央にある「Compiled CSS and JS」の「Download」をクリックしてBootstrapのZipファイルをダウンロードします。

ダウンロードしたZIPファイルをダブルクリックして解凍します。解凍したファイルはそのまま使用するので適当な名前に変更しておきましょう。

次にBootstrap4のDownload画面左側にある「Introduction」をクリックします。

「Introduction」画面を下にスクロールしていくと中央あたりに「Starter template」があります。こちらはBootstrap4の雛形ファイルになりますのでコピーしてお使いのテキストエディタに貼り付けましょう。コピーする際は画面右側の「Copy」をクリックすればOKです。

コピーした雛形ファイルをテキストエディタに貼り付けたら、<html lang=”en”>となっているところを<html lang=”ja”>に変更して日本語対応にしておきましょう。

編集が完了したらファイル名を「index.html」に変更してBootstrap4のファイルに入れてください。「css」「js」と「index.html」があればOKです。これでBootstrap4の導入は完了です。

ナビゲーションの作り方

ここからはBootstrap4で追加された新機能でもあるnavbar-togglerを使ったナビゲーションメニューのサンプルを紹介します。navbar-togglerクラスはレスポンシブ対応のナビゲーションを簡単に作成することができる便利な機能なので、是非活用してみてください。

これから作るナビゲーションの完成例

こちらのナビゲーションメニューはPCで表示した際は上画像のように表示されますが、スマホなどの画面サイズの小さなデバイスで表示した場合は下画像のようなハンバーガーメニューになります。ハンバーガーメニューになった際に自動でサイトのロゴが消えるように設定されています。

ハンバーガーメニューをクリックすると下画像のようにメニューがリスト表示されるようになっています。

以下のサンプルコードを事前に用意した雛形ファイルの<body>内に貼り付けると同じように表示できるので、お試しください。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
            <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
            <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
        </ul>
        <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

続いてハンバーガーメニュー時でもサイトロゴが表示されるタイプのナビゲーションです。
PCで表示した場合は通常のメニューで表示されます。

スマホの画面サイズで表示した際にも先ほどのサイトロゴがハンバーガーメニューの中に入ることなくトップに表示しているのが分かります。今回はハンバーガーメニューを右側にセットしています。

ハンバーガーメニューをクリックするとメニューが一覧で表示されます。サイトロゴはハンバーガーメニューと同じ位置に表示されています。スマホで表示される際もサイトロゴを維持したい方に最適な機能です。

こちらもサンプルコードを記載しておきます。ご自由にお使いください。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

次はtoggler機能を活用してハンバーガーメニュー内にコンテンツを表示するサンプルです。

こちらはPCでもスマホサイズでもハンバーガーメニューを表示させるようになっています。背景をサイトと合わせればハンバーガーメニューのみで表示することができます。

ハンバーガーメニューをクリックすると折りたたまれていたコンテンツが表示されます。ユーザーが任意で表示を切り替えられるので、長いテキストなどの説明文などを格納しておくのに非常に便利です。

こちらも、サンプルコードを記載しておきます。

<div class="pos-f-t">
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h4 class="text-white">Collapsed content</h4>
            <span class="text-muted">Toggleable via the navbar brand.</span>
        </div>
    </div>
    <nav class="navbar navbar-dark bg-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </nav>
</div>

まとめ

Bootstrap4では簡単にレスポンシブ対応のモダンなデザインが作れるようになっています。

Bootstrap3の時とは各種設定の方法が変わっていますので、クラスの書き方などに戸惑う方もいるかもしれませんが、今後はBootstrap4の方が主流になっていくと思いますので、是非慣れてみてください。

ユーザビリティに優れたBootstrap4は、コーディングしやすいのが最大の特徴です。各機能をマスターして魅力的なサイトを効率的に作成できるようになりましょう。