Bootstrap でページ作成 ①（ヘッダーの実装）

所要時間：60分

このレッスンからは「サービス紹介ページ」の制作を通して、Bootstrap の各種コンポーネントの扱い方を習得していきます。

このレッスンの目標

  • ナビゲーションバーコンポーネントの扱い方を理解（復習）する
  • サービス紹介ページのヘッダーが完成している

このレッスンで作るもの

このレッスンの演習課題では、以下のようにサービス紹介ページのヘッダー部分を作成します。

sm サイズ以下の画面幅の場合、以下のようにハンバーガーメニューが表示させます。

また、ハンバーガーアイコンをタップしてメニューの開閉ができるようにします。

サービス紹介ページの全体像はこちらになります。

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

ナビゲーションバーの使い方（復習）

ここでは、サービス紹介ページのヘッダーを構成する、Bootstrap のナビゲーションバーの扱い方を復習していきます。

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

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

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

【答え】

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

service.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>
    <!-- ヘッダー -->
    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">マナジョブ</a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#"
                >学習コース <span class="sr-only">(current)</span></a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">サービス内容</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              登録する
            </button>
          </form>
        </div>
      </nav>
    </header>

    <!-- 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 です。

service.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>
    <!-- ヘッダー -->
    <header>

    </header>

    <!-- 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>

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

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

service.html（追加コード）

      <!-- 追加コード：ナビゲーションバーの外枠を実装する -->
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      </nav>

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

以下の追加コードをステップ ② で追加したコード（nav タグ）の中に実装していきます。

service.html（追加コード）

        <!-- 追加コード：ブランドとメニュー開閉ボタンを実装する -->
        <a class="navbar-brand" href="#">マナジョブ</a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

ステップ ④：ナビゲーションと登録ボタンを実装する

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

service.html（追加コード）

        <!-- 追加コード：ナビゲーションと登録ボタンを実装する -->
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#"
                >学習コース <span class="sr-only">(current)</span></a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">サービス内容</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              登録する
            </button>
          </form>
        </div>

完成版のコード

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

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

service.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>
    <!-- ヘッダー -->
    <header>
      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="#">マナジョブ</a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#"
                >学習コース <span class="sr-only">(current)</span></a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">サービス内容</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              登録する
            </button>
          </form>
        </div>
      </nav>
    </header>

    <!-- 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>

【結果】

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

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

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

まとめ

このレッスンでは Bootstrap のナビゲーションバーを使用したヘッダーレイアウトの作成について学びました。

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

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

【公式リファレンス】

この続きを見るには？

ここから先のコンテンツは、プレミアム会員のみ閲覧できます。 学習を進める場合は、プレミアム会員にアップグレードしてください。

フリー会員
無料

まずは、30日間
無料でお試しください

プレミアム会員
2,178円(税込)

まずは、30日間
無料でお試しください

プラン詳細を確認する