.net column

.NET開発者のためのブログメディア
navigation

Bootstrap4のNavbarで作るナビゲーションメニューを紹介

2020年04月02日

自分で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サイトなどに活用してみてはいかがでしょうか。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)