自分でWebサイトを作る場合、ユーザーが各ページにアクセスできるようナビゲーションメニューを作る必要があります。そこで活躍するのがBootstrapの「Navbar」という機能。今回は、Bootstrap4のNavbarを使ってナビゲーションメニューを作っていきたいと思います。ぜひ参考にしていただければ幸いです。

PG

HTMLとCSSだけで実装するのは案外大変ですよね。

PM

Bootstrapを使えば、レスポンシブデザインのナビゲーションメニューが簡単に作れますよ。

基本的なナビゲーションバー

ここでは、基本的なナビゲーションバーを作成していきましょう。ナビゲーションバーは、「navbar」「navbar-expand-〇〇（sm/md/lg/xl）」「navbar-色名（dark/light）」「bg-色名（dark/light/primary）」をクラスに指定して使います。

実行結果

ちなみに、クラスをnavbar-dark / bg-darkに指定するとこのようになります。

また、ユーザーがキーワード検索できるようナビゲーションバーに検索画面を追加したい場合は、下記コードをナビゲーションの要素内に追記します。

このように、ユーザーが使いやすいナビゲーションバーを簡単に作成することができました。では次項では、ナビゲーションバーのカスタマイズを行っていきます。

ナビゲーションバーのカスタマイズ

Navbarでは明るめの背景色・暗めの背景色・定義済みの背景色を指定することができますが、Webサイトによっては「もっと違う色を使いたい！」ということもあります。
ここでは、任意の背景色でナビゲーションバーを作成していきます。

やることはとても簡単で「bg-色名」を以下のように書き換えるだけです。

このように、今回はピンク色に変更しましたが、色コードを変更すればどんな色にも対応することができます。

PG

クラスを指定するだけで、こんなに簡単にナビゲーションバーが作れるんですね。

PM

カスタマイズも簡単なので、Webサイトのデザインに合ったナビゲーションバーが作れますよ。

Bootstrap4のNavbarで使いやすいサイトを作成しよう

今回は、Bootstrap4のNavbarを使った基本的なナビゲーションメニューから、カスタマイズまでを行っていきました。Bootstrap4では、デフォルトで多くのクラスが用意されているため、クラスを指定するだけでデザイン性の高いナビゲーションバーを作ることができます。ぜひ、Webサイトなどに活用してみてはいかがでしょうか。