Bootstrapを使うと、ナビゲーションバー（メニュー）を簡単に設置できます。
しかし、「もっとおしゃれにしたい」「中央にロゴを配置したい」「右寄せしたい」と思ったことはありませんか？
この記事では、Bootstrapのナビゲーションバー navbarを使って簡単にアレンジする5つの方法を、初心者でも分かりやすく紹介します。
サンプルコードをコピペするだけで実装できるので、ぜひ自分のサイトに活かしてみてください。
Bootstrapナビゲーションバーの基本構造
Bootstrap公式サイトにアクセスし、【ドキュメント】→Components→Navbarをクリックし、ナビゲーションバーを開きます。
Bootstrap公式サイトはこちら👉Bootstrapで高速でレスポンシブなサイトを構築しよう
下にスクロールすると、ナビゲーション の画面があります。
Bootstrapのナビバーは、公式ドキュメントにある以下の構造が基本です。Codeをコピーします。
コピーしたHTML Codeを貼り付けweb表示されたのが以下の画面です。
Bootstrapの公式ドキュメントにあるナビバージョンバーの基本形です
画面幅が小さくなると、右側にハンバーガーメニュー（3本線）が現れてメニューが閉じられます。
コピペ用コードはこちら↓
See the Pen Bootstrapナビゲーション基本形 by VA-Rie (@VA-Rie) on CodePen.
このコードをベースに、アレンジを加えていくことで簡単にデザイン性をアップできます。
ナビゲーションバーをアレンジする5つの方法
ナビゲーションバーのメニューを替える
ナビゲーションバーを以下のようにアレンジします。
ブランドロゴ・My Blog
メニュー・「ホーム」 「記事一覧」 「お問い合わせ」
このように変更します
下のコードで赤線を変更します。最後の四角で囲った部分は削除します。
変更後の実際のパソコン画面↓
コピペ用code↓
See the Pen Bootstrap ナビゲーションアレンジ01 by VA-Rie (@VA-Rie) on CodePen.
1. メニューを右寄せにする
ブランドロゴはそのままで、メニューだけを右に寄せます。
これはとっても簡単！
<ul>クラスにms-auto を付け加えるだけで右寄せにできます。
コピペ用code↓
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
2. ブランド名を左に寄せつつメニューを右へ配置
ナビゲーションバーンの左端に余白を入れます。
以下のように、ms-5 ms-auto を付け加えます。
コピペ用code↓
See the Pen Bootstrap navber アレンジ03 by VA-Rie (@VA-Rie) on CodePen.
3. コンテナを使って中央揃えをきれいに調整
container-fluid の fluidを削除します。
<ul>classに ms-autoを付け加えます。
コピペ用code↓
See the Pen Bootstrap navbweアレンジ04 by VA-Rie (@VA-Rie) on CodePen.
4. ブランド名を中央に配置する
以下のように、position-absolute top-50 start-50 translate-middleを付け加えます。
<ul>クラスには me-5を付け加えます。
この場合、ハンバーガーメニューは左側にきます。
コピペ用code
See the Pen Bootstrap navbweアレンジ05 by VA-Rie (@VA-Rie) on CodePen.
5. 全体を背景色つきで見やすく
Bootstrapでは、bg-body-tertiaryの部分を変更することで簡単に雰囲気を変えられます。
Bootstrapでは、bg-body-tertiaryの部分を bg-dark navbar-dark に変えると、ダークトーンの背景で、よりスタイリッシュなデザインになります。
コピペ用code↓
See the Pen Bootstrap navbweアレンジ05 by VA-Rie (@VA-Rie) on CodePen.
まとめ
Bootstrapのナビゲーションバーは、クラスを少し変えるだけで簡単に印象を変えられます。
特に、ms-auto・position-absolute・containerといったクラスを組み合わせることで、**「シンプルだけどデザイン性のあるメニュー」**をすぐに作れます。
自分のサイトに合ったナビバーを選び、統一感のあるデザインに仕上げましょう。
コメント