Bootstrap でページ作成 ①（ナビバーの実装）

所要時間：60分

このレッスンでは、Bootstrap でよく利用するコンポーネントの一つである「ナビゲーションバー」の扱い方について学習していきます。

まずは公式リファレンスのサンプルコードを例に、具体的なナビゲーションバーのコードについて詳しく解説しますので、基本的な扱い方が理解できたら、実際の演習課題に取り掛かっていきましょう。

このレッスンの目標

  • Bootstrap の「ナビゲーションバー」コンポーネントを理解する
  • 料金プランページのヘッダー部分（ナビゲーションバー）の実装が完成している

このレッスンで作るもの

演習課題では、以下のような料金プランページのヘッダー部分を作成していきます。（赤枠で囲った部分）

スマホなど画面サイズの小さい端末で表示すると、以下のようになります。（ハンバーガーアイコンをタップして開閉）

それでは早速、ナビゲーションバーの学習に入っていきましょう。

ナビゲーションバーの使い方（コード解説）

はじめに、Bootstrap の公式リファレンスで紹介されている、ナビゲーションバーのテンプレートコードを解説していきます。

ナビゲーションバーのテンプレートコードは、以下のリンクから確認できます。

Bootstrap 公式リファレンス - Navbar

引用：Bootstrap 公式リファレンス - Navbar

テンプレートコードを確認すると、ナビゲーションバーのコードは以下のようになっていると思います。

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

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Bootstrap のナビゲーションバーは、ブランド名（ロゴマーク）やナビゲーション、検索フォームなど複数のコンテンツを含んだナビゲーションバーを作成するコンポーネントになっています。

そのため、上記のような複雑なコードになっており、一度で全体のコードを理解するのが難しくなっています。

そこで、まずは以下のイメージでナビゲーションバーを構成するパーツを分解し、それぞれのコードで何をしているのか解説していきます。

それでは早速、各パーツのコード解説を見ていきましょう。

コード解説 1：ナビゲーションバーの外枠

まず初めに、ナビゲーションバーを構成する外枠のコードについて解説していきます。

ナビゲーションバーを作成するには、nav 要素に navbarクラス を追加して外枠を作成していきます。

ナビゲーションバーの外枠となる要素には、navbar クラスを含めて以下のようなクラスが指定できます。

【ナビゲーションバーの外枠に使用するクラス】

クラス 概要
navbar ナビゲーションバーの外枠を作成
navbar-expand-{ ブレイクポイント } ブレイクポイントでナビゲーション項目の表示を切り替え
navbar-{ 背景色の種類 } 背景色が dark の場合は明るい文字色、 light の場合は暗い文字色を設定
bg-{ 色の種類 } primary(青)、 secondary(グレー)など背景色を設定

上記の内容を踏まえて、もう一度ナビゲーションバーのテンプレートコードを確認してみましょう。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- ここにサブコンポーネントが入る -->
</nav>

このコードは、navbar クラスを設定した nav 要素に navbar-expand-lg クラス を追加して、画面幅 lg 以上になるとナビゲーション項目が横に広がって表示され、画面幅 md 以下になると折り畳まれてアイコン表示になるナビゲーションバーを作成しています。

実際に画面幅が lg(992px) 以上の状態でナビゲーションバーを確認すると、以下のようになります。

反対に画面幅が md(768px〜991px) 以下の状態でナビゲーションバーを確認すると、以下のようになります。

また、 navbar-lightクラス と bg-lightクラス を追加して、ナビゲーションバーの背景色が明るいときに、サブコンポーネントの文字色を暗くして読みやすくなるように設定しています。

これは、Bootstrap の構造とスキンを分けるという考え方に沿った、見た目を変える「スキン」にあたるクラスです。

外枠のコードだけでも様々なクラスが付与されており、慣れるまでは難しく感じるかも知れませんが、各クラスの概要を理解しつつ、マルチクラス特有のコーディング方法に少しずつ慣れていきましょう！

コード解説 2：ナビゲーションバーのサブコンポーネント

それでは次に、ナビゲーションバーの外枠を構成する navbarクラス の内部に記述するサブコンポーネントについて解説していきます。

ナビゲーションバーのサブコンポーネントを作成するには、以下のようなクラスを使用します。

【ナビゲーションバーの主なサブコンポーネントを作成するクラス】

クラス 概要
navbar-brand 会社、製品、プロジェクトなどのブランド名やロゴを表示
navbar-toggler ナビゲーションの表示切り替えボタンを作成
navbar-toggler-icon ナビゲーション非表示時に表示されるアイコン（ハンバーガーアイコン）
collapse navbar-collapse ナビゲーションバー内に切り替え表示されるコンテンツを作成
navbar-nav ナビゲーションバー内にナビゲーションを作成
form-inline フォームの入力コントロールなどを作成
navbar-text ナビゲーションバー内の垂直方向中央に表示されるテキストを作成

上記の内容を踏まえて、サブコンポーネントのテンプレートコードを確認してみましょう。

まずは、ブランド名やロゴを記述する navbar-brand クラス の記述部分です。

ブランドを表示するコードは、ナビゲーションバーの外枠を構成する navbarクラス のタグ内に記述しているのが確認できます。アンカータグで囲われたテキスト部分を編集することで、ブランド名を変更できます。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- 省略… -->
</nav>

演習課題で作成する料金プランページでは、以下のようにブランド名を変更しています。

次に、ナビゲーションの表示切り替えボタンを作成する navbar-toggler クラス と、ナビゲーションが非表示の時に表示されるハンバーガーメニュー navbar-toggler-icon クラス の記述部分です。

ここは、ハンバーガーメニューの大枠となるボタン部分を <button class="navbar-toggler" ...省略 > で作成しています。

さらに、 button タグの内部に <span class="navbar-toggler-icon"></span> と記述することで、ハンバーガーメニューの三本ラインを表示しています。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 省略… -->

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

  <!-- 省略… -->
</nav>

このコード部分によって、以下のハンバーガーメニューが作成されます。

最後は、ナビゲーションバーの中に表示されるナビゲーション部分のコードです。

このコード部分は、ナビゲーションバー内に切り替え表示されるコンテンツを作成する collapse navbar-collapse クラス と、実際のナビゲーションメニューを作成していく navbar-nav クラス で構成されます。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 省略… -->

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
        <!-- ここにナビゲーションが入る -->
    </ul>
    <!-- フォーム省略… -->
  </div>

  <!-- 省略… -->
</nav>

まず、ここで注目するコードは、 collapse navbar-collapse クラス を付与した div 要素に指定された ID 属性です。

テンプレートコードでは、ID 属性に id="navbarSupportedContent" と指定されています。これは、先程確認したハンバーガーメニューを構成する button タグに記述される以下の属性と一致させる必要があります。

  • data-target="#navbarSupportedContent"
  • aria-controls="navbarSupportedContent"

この 2 つの属性では、ハンバーガーメニューをタップした際に「切り替え表示されるコンテンツがどれなのか」を特定しています。

そのため、この属性値に指定した ID 名と実際にナビゲーション部分の div 要素に指定した ID 名が一致していなければ、ハンバーガーメニューによるメニューの開閉はできません。

ここまでの内容をまとめると、以下のようになります。

次に、実際のナビゲーションメニューを作成している navbar-nav クラス を確認していきます。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 省略… -->

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <!-- ドロップダウンメニュー省略… -->
    </ul>
    <!-- フォーム省略… -->
  </div>

  <!-- 省略… -->
</nav>

ここのタグ構成はシンプルで、一般的なリストタグの記述方法と同じです。

以下のように、ul タグの内部に li タグがあり、li タグに記述するメニュー名を a タグで囲んでリンク設定しています。

<ul class="navbar-nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">メニュー名</a>
    </li>
</ul>

それぞれのタグには以下のクラスを指定します。

  • ul タグには navbar-nav クラス を指定する
  • li タグには nav-item クラス を指定する
  • a タグには nav-link クラス を指定する

ナビゲーションバーのサブコンポーネントについての解説は以上です。

※ 今回は、テンプレートコードに記述された「ドロップダウンメニュー」と「入力フォーム」の作成は不要なため、解説を割愛します。

ここまでが、ナビゲーションバーの中に実装するサブコンポーネントの解説でした。

一度で理解するのは難しいと思いますが、何度か読み返して理解を深めるようにしてください。

コード解説 3：ナビゲーションバーの配色

ここまで、ナビゲーションバーの外枠、ナビゲーションバーの中に実装するサブコンポーネントについて解説してきました。

次は、ナビゲーションバーの配色に関するコード解説です。

ナビゲーションバーの配色を行う場合は、まず navbar クラスが設定された要素に navbar-light クラス または、 navbar-dark クラス を追加します。

navbar-light クラス を追加すると、明るい背景色で読みやすくなるように暗い文字色が設定されます。

逆に、navbar-dark クラス を追加すると、暗い背景色で読みやすくなるように明るい文字色が設定されます。

ナビゲーションバーの背景色については、bg-{ 色の種類 } クラス を追加したり、CSS で直接スタイルを追加して背景色を設定できます。

実際に、いくつかのパターンでナビゲーションバーの背景色を変更したサンプルコードが以下になります。

<h3>背景色サンプル①：navbar-darkで文字色を明るくし、bg-darkで暗い背景色を設定</h3>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 省略… -->
</nav>

<h3>背景色サンプル②：navbar-darkで文字色を明るくし、bg-primaryで青い背景色を設定</h3>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <!-- 省略… -->
</nav>

<h3>背景色サンプル③：navbar-lightで文字色を暗くし、bg-lightで白い背景色を設定</h3>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 省略… -->
</nav>

<h3>背景色サンプル④：navbar-lightで文字色を暗くし、背景色をCSSで設定</h3>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #D6E5DF;">
    <!-- 省略… -->
</nav>

上記コードでナビゲーションバーに配色を施した場合、表示結果は以下のようになります。

配色についての解説は以上です。

これまでの解説を踏まえて演習課題に取り組みながら、ナビゲーションバーの扱い方を覚えていきましょう！

演習課題：ナビゲーションバーで料金プランページのヘッダーを作成しよう

それではレッスンの演習課題として、料金プランページのヘッダー（ナビゲーションバー）を作成していきます。

【TODO】

  • PC 内の任意の場所に price_page というフォルダを作成してください。
  • price_page フォルダ内に price.html という名称で HTML ファイルを作成してください。
  • 【答え】に記載された見本コードを確認しながら、ナビゲーションバーをコーディングしてください。
  • レッスンの「まとめ」に記載した公式リファレンスを参照して、各種ユーティリティの使い方を確認してください。

【答え】

完成版のコードはこちらになります。

price.html（完成コード）

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>料金プランページ</title>
</head>

<body>

  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white p-3 mb-3 border-bottom shadow-sm">
    <a class="navbar-brand" href="#">マナジョブ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー4</a>
        </li>
      </ul>
      <a class="btn btn-outline-primary ml-lg-4" href="#">ログイン</a>
    </div>
  </nav>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
</body>

</html>

それぞれ、コードの意味を理解しながら、以下の流れでコーディングを進めてください。

ステップ ①：雛形コードを実装する

※雛形コードはコピー＆ペーストで OK です。

price.html（雛形コード）

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>料金プランページ</title>
</head>

<body>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
</body>

</html>

ステップ ②：ナビゲーションバーの外枠を実装する

以下の追加コードを <body> タグの配下に実装していきます。

price.html（追加コード）

  <!-- 追加コード：<body> タグの配下に実装する -->
  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white p-3 mb-3 border-bottom shadow-sm">
  </nav>

ステップ ③：ブランドとメニュー切替ボタンを実装する

以下の追加コードをナビゲーションバーの外枠コードの中に実装していきます。

price.html（追加コード）

    <!-- 追加コード：ナビゲーションバーの外枠コードの中に実装する -->
    <a class="navbar-brand" href="#">マナジョブ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

ステップ ④：メニュー項目を実装する

以下の追加コードをステップ ③ の下に実装していきます。

price.html（追加コード）

    <!-- 追加コード：ステップ③のコードより下に実装する -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー4</a>
        </li>
      </ul>
      <a class="btn btn-outline-primary ml-lg-4" href="#">ログイン</a>
    </div>

完成版のコード

もう一度、完成版のコードを提示しますので、同じように実装できているか確認してみましょう。

コメントは表示結果に直接影響を与えないので、記載の有無は問いません。表示結果が同じようになっていれば OK です。

price.html（完成コード）

<!doctype html>
<html lang="ja">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

  <title>料金プランページ</title>
</head>

<body>

  <!-- ナビゲーションバー -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white p-3 mb-3 border-bottom shadow-sm">
    <a class="navbar-brand" href="#">マナジョブ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">メニュー1 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">メニュー4</a>
        </li>
      </ul>
      <a class="btn btn-outline-primary ml-lg-4" href="#">ログイン</a>
    </div>
  </nav>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>
</body>

</html>

【結果】

lg サイズ以上の画面幅の場合、以下のように横並びのナビゲーションメニューが表示されたら OK です。

md サイズ以下の画面幅の場合、以下のようにハンバーガーメニューが表示されたら OK です。

また、ハンバーガーアイコンをタップしてメニューの開閉ができることを確認してください。

まとめ

このレッスンでは Bootstrap でよく利用するコンポーネントの「ナビゲーションバー」について学んでいきました。

コードの解説を何度か読み返して理解を深め、演習課題にチャレンジしてみましょう！

最後に、今回のレッスンで確認した Bootstrap 公式のリファレンスをまとめておきますので、復習するときは以下の公式リファレンスも参考にしてください。

【公式リファレンス】

次のレッスン：Bootstrap でページ作成 ②（カードの実装）