ナビゲーションメニュー( Navbar )の中央寄せ、右寄せなどの使い方 : Bootstrap 4

Bootstrap4 のナビゲーションメニュー(以下 Navbar と呼ぶ)の使い方です。
Bootstrap4 から Navbar は Flexbox で構成されているので、メニューの中央寄せ、左右への配置など簡単にすることができます。

目次

  1. Bootstrap とは
  2. Bootstrap4 での Navbar の使い方
  3. ブランド名・ロゴの追加方法
  4. トグル( Toggle )の追加方法
  5. メニューの作成方法
  6. Navbar メニュークリックで、メニューを閉じる
  7. フォームの設置方法
  8. テキストの追加方法
  9. Navbar の位置の変更方法
  10. Bootstrap4 で Navbar を使ってみよう
 

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

Bootstrap とは

Bootstrap は、 Web サイトの開発などに使うフレームワークのことです。 Twitter 社が開発し、世界で最も人気なフレームワークとされています。 HTML / CSS 、Javascript で構成されており、開発を効率的に進められます。

Web サイト作成で使われるボタンやフォームなども機能が備わっており、レスポンシブ対応のためあらゆるデバイスからの閲覧にも対応できます。

Bootstrap 4は2018年2月21日にリリースされたバージョンです。本記事ではこの Bootstrap4 での Navbar の使い方をまとめました。

▼Bootstrap4 についてはこちらの記事でも詳しく解説しています。
https://knowledge.cpi.ad.jp/tech/top-1/

Bootstrap4 での Navbar の使い方

Navbar を使うには .navbar と、.navbar-expand-{sm、md、lg、xl} と、カラースキームの指定が必要です。

カラースキームは 暗い背景に .navbar-darkか、明るい背景に .navbar-lightを指定すると、リンクなどの色が変わります。
次に .bg-*****(dark、info、primaryなど) で背景色を決めます。

例:

<nav class="navbar navbar-expand-md navbar-dark bg-primary">
  <!-- Navbar content -->
  <p>Navbar content</p>
</nav>

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <!-- Navbar content -->
  <p>Navbar content</p>
</nav>

結果: sample

ブランド名・ロゴの追加方法

ブランド名・ロゴを追加するには .brand-name を使います

<!-- リンク付きブランド名 -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- ブランド名 -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

<!-- 画像 -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- 画像とテキスト -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

結果: sample

トグル(Toggle)の追加方法

画面幅を小さくしていくと、グローバルナビが消え、開閉式のメニューボタンが表示されます。 そのメニューボタン制御にトグルを使います。

コード例:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
  • button:に .navbar-toggler を追加
  • data-toggle.collapse 必須
  • data-target:折りたたんだメニューのIDかクラスを指定
  • aria-controls:折りたたんだメニューのIDかクラスを指定
  • aria-expanded:アクセシビリティ確保のためW3Cで取り決めがあります。
    グループの要素が折りたたまれている場合はfalse、展開時はtrue。自動で切り替わります。
  • aria-label:ラベル

トグルの位置

トグルボタンは通常左に設置されますが、a.brand-name の位置により左か、右が変わります。

右にメニューボタン

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

結果:トグルボジション

メニューの作成方法

トグルボタンが利用可能になったので、メニューを作ります。

例:

&ltdiv class="collapse navbar-collapse" id="navbarNav">
  &ltul class="navbar-nav">
  &ltli class="nav-item active">
    &lta class="nav-link" href="#">Home &ltspan class="sr-only">(current)&lt/span>&lt/a>
  &lt/li>
  &ltli class="nav-item">
    &lta class="nav-link" href="#">Features&lt/a>
  &lt/li>
  &ltli class="nav-item">
    &lta class="nav-link disabled" href="#">Disabled&lt/a>
  &lt/li>
  &lt/ul>
&lt/div>
  • div.collapse .navbar-collapse
    メニューの親要素に 「.collapse .navbar-collapse」を追加します。画面幅が所定のサイズ以下になったときに折りたたまれグルーピングされます。
  • div#navbarNav
    トグル(Toggle)のdata-targetと同じIDを付与します。
  • メニュー項目
    ul.navbar-nav
    li.navbar-item
    a.nav-link
  • アクティブのメニュー
    .active を ulに追加します。

Navbarメニュークリックで、メニューを閉じる

BoottrapのNavbarは、リンクをクリックしても自動でメニューが閉じません。 自動で閉じるには下記コードのどちらかを追記する必要があります。

  • a.nav-link に 下記を追加
    data-toggle="collapse" data-target=".navbar-collapse.show"
    
  • JavaScriptのコードを追加
    $('.navbar-nav>li>a').on('click', function(){
      $('.navbar-collapse').collapse('hide');
    });
    
    例:
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">
            Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">
            Features
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse.show">
            Pricing
          </a>
        </li>
      </ul>
    </div>
    

フォームの設置方法

Navbar内へのフォーム設置は「.form-inline」を指定するとインライン配置ができます。

例:

 <form class="form-inline">
   <input class="form-control mr-sm-2" type="search" aria-label="Search">
   <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search </button>
 </form>

結果:

テキストの追加方法

Navbarにテキストを追加します。

<span class="navbar-text">
  Navbar text with an inline element
</span>

Navbarの位置変更方法

  • nav.fixed-top : Topに固定
  • nav.fixed-bottom : 底辺に固定
  • nav.sticky-top : スクロール時もTopに固定
  • .justify-content-start : 水平方向の左寄せ
  • .justify-content-end : 水平方向の右寄せ
  • .justify-content-center : 水平方向の中央寄せ
  • .justify-content-between : 左右余白を開けず等間隔に配置
  • .justify-content-around : 左右に余白を開け等間隔に配置

例:

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

  <div class="collapse navbar-collapse justify-content-around" id="navbarNav4">

    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

結果: 

 

関連タグ:

【期間限定プラン】簡単!ホームページセットアッププラン お申し込みは2022年7月29日(金)15:00まで

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ