Bootstrap 5 ナビゲーションバー作成ガイド

Bootstrap 5は、ウェブデザインのフレームワークとして非常に人気があり、その中でも「ナビゲーションバー（ナビゲーションメニュー）」はウェブサイトのユーザーインターフェース（UI）でよく使用される重要な要素です。Bootstrap 5では、レスポンシブデザインや直感的なインターフェース作成を簡単に行えるため、多くのウェブ開発者にとって非常に有用です。本記事では、Bootstrap 5でのナビゲーションバーの作成方法について、基本的な使い方からカスタマイズ方法までを詳しく説明します。

1. Bootstrap 5 ナビゲーションバーの基本構造

Bootstrap 5のナビゲーションバーは、navbarというクラスを使用して作成します。以下のコードは、シンプルなナビゲーションバーの基本構造です。

「Link To Share」は、あらゆるマーケティング機能を備えたプラットフォーム。 簡単かつプロフェッショナルに、あなたのコンテンツへユーザーを誘導します。

• モダンで自由度の高いプロフィール（Bio）ページ • 高度な分析機能を備えたリンク短縮 • ブランドを印象付けるインタラクティブQRコード • 静的サイトのホスティングとコード管理 • ビジネスを強化する多彩なウェブツール

今すぐ始めてプロジェクトを強化しましょう！

html
CopyEdit
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド名a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションを切り替える">
    <span class="navbar-toggler-icon">span>
  button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(現在地)span>a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">特徴a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">料金a>
      li>
      <li class="nav-item">
        <a class="nav-link" href="#">お問い合わせa>
      li>
    ul>
  div>
nav>

コードの解説

• 

• ブランド名: ブランド名をリンクとして設定する部分です。
• : モバイル端末などの小さい画面で、ナビゲーションメニューをトグル（開閉）するためのボタンです。
• : ナビゲーションメニューが展開される部分で、collapseクラスを使用して、画面サイズが小さい場合にメニューが折りたたまれるようにしています。
• : ナビゲーションリンクのリストを作成します。

  2. レスポンシブデザインの設定

  Bootstrap 5では、ナビゲーションバーが画面サイズによって適切にレイアウトを変更します。上記のコードで使用しているnavbar-expand-lgは、画面サイズがlg以上の場合にナビゲーションバーを水平方向に展開し、それより小さい画面では縦方向に表示します。

  さらに、ナビゲーションバーのトグルボタン（メニューを開閉するボタン）は、navbar-togglerクラスを使用して作成されます。このボタンが表示されるのは、画面が小さいときのみです。

  トグルボタンの動作

  トグルボタンの動作は、data-bs-toggle="collapse"およびdata-bs-target="#navbarNav"属性によって管理されます。これにより、ボタンをクリックすることで、ナビゲーションメニューが表示または非表示になります。

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

  Bootstrap 5では、ナビゲーションバーを簡単にカスタマイズすることができます。例えば、背景色やリンクの色、フォントサイズなどを変更することができます。

  背景色とリンクの色

  ナビゲーションバーの背景色やリンクの色を変更するには、bg-クラスやnavbar-dark/navbar-lightクラスを使用します。

  html
  CopyEdit
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">ブランド名a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">ホームa>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">特徴a>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">料金a>
        li>
        <li class="nav-item">
          <a class="nav-link" href="#">お問い合わせa>
        li>
      ul>
    div>
  nav>
  

  • navbar-darkクラスは、ナビゲーションバーのテキストを明るくし、bg-darkクラスは背景色を暗くします。

  アイコンの追加

  ナビゲーションバーにアイコンを追加することもできます。例えば、Font Awesomeなどのアイコンライブラリを使用して、リンクにアイコンを追加することができます。

  html
  CopyEdit
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="fa fa-home">i> ホームa>
  li>
  

  ここでは、タグを使って、Font Awesomeの「ホーム」アイコンを追加しています。

  4. ドロップダウンメニューの追加

  Bootstrap 5では、ナビゲーションバーにドロップダウンメニューを簡単に追加することができます。以下は、そのコード例です。

  html
  CopyEdit
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      メニュー
    a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">アクション 1a>li>
      <li><a class="dropdown-item" href="#">アクション 2a>li>
      <li><hr class="dropdown-divider">li>
      <li><a class="dropdown-item" href="#">アクション 3a>li>
    ul>
  li>
  

  コードの解説

  • nav-item dropdownは、ドロップダウンメニューのアイテムを定義します。
  • dropdown-toggleクラスをリンクに追加することで、クリック時にメニューが表示されるようになります。
  • ドロップダウンメニュー自体はdropdown-menuクラスで作成され、dropdown-itemクラスで個々のメニューアイテムが定義されます。

  5. ナビゲーションバーの固定化

  ナビゲーションバーをスクロール時に画面の上部に固定することができます。これを実現するには、fixed-topクラスを使用します。

  html
  CopyEdit
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">ブランド名a>
    
  nav>
  

  このようにすると、ユーザーがページをスクロールしてもナビゲーションバーが常に画面の上部に表示されます。

  まとめ

  Bootstrap 5のナビゲーションバーは、レスポンシブデザインを簡単に実装でき、カスタマイズ性も非常に高いです。基本的な構造から、ドロップダウンメニューやアイコンの追加、固定化の方法まで幅広いカスタマイズが可能です。このガイドを参考にして、自分のウェブサイトに最適なナビゲーションバーを作成してください。