Bootstrap でページ作成 ③（フッターの実装）

所要時間：60分

このレッスンでは、Bootstrap のグリッドシステムを利用した 3 分割レイアウトの実装方法について学習していきます。

このレッスンの目標

  • Bootstrap の「グリッドシステム」を利用した 3 分割レイアウトの実装方法を理解する
  • 料金プランページのフッター部分の実装が完成している

このレッスンで作るもの

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

スマホなど画面サイズの小さい端末で表示すると、以下のようになります。

まず最初にグリッドシステムの復習を行い、その後に演習課題に取り組む流れになります。

それでは早速、学習に入っていきましょう。

グリッドシステムの使い方を復習しよう

ここではグリッドシステムのポイントについて簡単に復習していきます。

復習 1：グリッドシステムを支える 3 つのクラス

まず、グリッドシステムを利用したレイアウトを作成する場合、必ず覚える 3 つのクラスがありました。

それは、

  1. コンテナクラス： .container
  2. ロークラス： .row
  3. カラムクラス： .col

の 3 つです。

それぞれのクラスの使い方を纏めた図をもう一度確認しておきましょう。

まず、グリッドシステムでレイアウト管理したいコンテンツをコンテナクラスの .container で囲い、コンテナクラスの中に、行を表すロークラス .row を定義していきます。

そして、ロークラスの中に 12 分割で管理していくカラムクラス .col- を定義して、カラムクラスは全体で 12 分割になるように数値を決めていくのが基本的な扱い方でした。

復習 2：Bootstrap の画面幅の定義とブレイクポイント

Bootstrap では、以下の画面幅を基準にレイアウトを切り替えるブレイクポイントという仕組みがありました。

画面幅 呼び方（定義） クラス接頭辞
0px 以上 576px 未満 Extra small .col-
576px 以上 768px 未満 Small .col-sm-
768px 以上 992px 未満 Medium .col-md-
992px 以上 1200px 未満 Large .col-lg-
1200px 以上 Extra large .col-xl-

グリッドシステムを利用する際は、この画面幅を基本にレイアウトを組んでいくことになります。

また、Bootstrap では基本的にスマホサイズからレイアウトを定義していき、特定のブレイクポイントごとにレイアウトを切り替えるようクラスを追加していきます。

例えば、以下のコードは「スマホサイズでは 6 分割のカラム幅になり、タブレットなどの md サイズ以上では 4 分割のカラム幅になる」と理解していきます。

<div class="col-6 col-md-4">

参考：Bootstrap 公式リファレンス - Grid options

グリッドシステムの復習については以上です。

レッスンの演習課題では、実際にコーディングを進めながら、グリッドシステムの扱い方を学んでいきます。

※もし、グリッドシステムについて詳しく復習したい場合は「Bootstrap のグリッドシステムを理解しよう」のレッスンを参照してください。

演習課題：3 分割のフッターレイアウトを作成しよう

それではレッスンの演習課題として、料金プランページのフッターを作成してみましょう。

【TODO】

  • 前章までに作成していた 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>

    <!-- 見出し -->
    <div
      class="pricing-header px-3 py-3 mx-auto text-center"
      style="max-width: 700px"
    >
      <h1 class="display-4">料金プラン</h1>
      <p class="lead">
        ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。
      </p>
    </div>

    <!-- 料金プラン -->
    <div class="container">
      <!-- カードデッキ：card-deck -->
      <div class="card-deck mb-3 text-center">
        <!-- カード01：フリー会員 -->
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0">フリー会員</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">無料</h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>まずは、30日間</li>
              <li>無料でお試しください</li>
            </ul>
            <button
              type="button"
              class="btn btn-lg btn-block btn-outline-primary"
            >
              利用中
            </button>
          </div>
        </div>

        <!-- カード02：ライト会員 -->
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0">ライト会員</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">
              ￥2,980 <small class="text-muted">/ 月</small>
            </h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>まずは、30日間</li>
              <li>無料でお試しください</li>
            </ul>
            <button type="button" class="btn btn-lg btn-block btn-primary">
              今すぐ利用開始する
            </button>
          </div>
        </div>

        <!-- カード03：プロ会員 -->
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0">プロ会員</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">
              ￥4,980 <small class="text-muted">/ 月</small>
            </h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>まずは、30日間</li>
              <li>無料でお試しください</li>
            </ul>
            <button type="button" class="btn btn-lg btn-block btn-primary">
              今すぐ利用開始する
            </button>
          </div>
        </div>
      </div>
      <!-- /.card-deck -->
    </div>
    <!-- /.container -->

    <!-- フッター -->
    <div class="container pt-4 my-md-5 pt-md-5 border-top">
      <div class="row">
        <!-- 1列目：フッターメニュー1 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー1</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>

        <!-- 2列目：フッターメニュー2 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー2</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>

        <!-- 3列目：フッターメニュー3 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー3</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>
      </div>
    </div>
    <!-- /.container -->

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

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

ステップ ①：フッター部分の大枠を実装する

以下のコードを、前回のレッスンで実装したメインコンテンツの実装コードより下に追加します。

price.html（追加コード）

    <!-- 追加コード：メインコンテンツのコードより下に実装する -->
    <!-- フッター -->
    <div class="container pt-4 my-md-5 pt-md-5 border-top">
    </div>
    <!-- /.container -->

ステップ ②：3 分割のカラムクラスでフッターコンテンツを実装する

次に、グリッドシステムのロークラスを一つ追加し、その中にカラムクラスを 3 分割にしてフッターのコンテンツを実装していきます。

price.html（追加コード）

      <!-- 追加コード：ステップ①で追加したコンテナクラスの中に実装する -->
      <div class="row">
        <!-- 1列目：フッターメニュー1 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー1</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>

        <!-- 2列目：フッターメニュー2 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー2</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>

        <!-- 3列目：フッターメニュー3 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー3</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>
      </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>

    <!-- 見出し -->
    <div
      class="pricing-header px-3 py-3 mx-auto text-center"
      style="max-width: 700px"
    >
      <h1 class="display-4">料金プラン</h1>
      <p class="lead">
        ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。ここにリードメッセージが入ります。
      </p>
    </div>

    <!-- 料金プラン -->
    <div class="container">
      <!-- カードデッキ：card-deck -->
      <div class="card-deck mb-3 text-center">
        <!-- カード01：フリー会員 -->
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0">フリー会員</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">無料</h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>まずは、30日間</li>
              <li>無料でお試しください</li>
            </ul>
            <button
              type="button"
              class="btn btn-lg btn-block btn-outline-primary"
            >
              利用中
            </button>
          </div>
        </div>

        <!-- カード02：ライト会員 -->
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0">ライト会員</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">
              ￥2,980 <small class="text-muted">/ 月</small>
            </h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>まずは、30日間</li>
              <li>無料でお試しください</li>
            </ul>
            <button type="button" class="btn btn-lg btn-block btn-primary">
              今すぐ利用開始する
            </button>
          </div>
        </div>

        <!-- カード03：プロ会員 -->
        <div class="card mb-4 shadow-sm">
          <div class="card-header">
            <h4 class="my-0">プロ会員</h4>
          </div>
          <div class="card-body">
            <h1 class="card-title">
              ￥4,980 <small class="text-muted">/ 月</small>
            </h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>まずは、30日間</li>
              <li>無料でお試しください</li>
            </ul>
            <button type="button" class="btn btn-lg btn-block btn-primary">
              今すぐ利用開始する
            </button>
          </div>
        </div>
      </div>
      <!-- /.card-deck -->
    </div>
    <!-- /.container -->

    <!-- フッター -->
    <div class="container pt-4 my-md-5 pt-md-5 border-top">
      <div class="row">
        <!-- 1列目：フッターメニュー1 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー1</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>

        <!-- 2列目：フッターメニュー2 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー2</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>

        <!-- 3列目：フッターメニュー3 -->
        <div class="col-6 col-md-4">
          <h5>フッターメニュー3</h5>
          <ul class="list-unstyled">
            <li><a class="text-muted" href="#">メニューアイテム1</a></li>
            <li><a class="text-muted" href="#">メニューアイテム2</a></li>
            <li><a class="text-muted" href="#">メニューアイテム3</a></li>
            <li><a class="text-muted" href="#">メニューアイテム4</a></li>
            <li><a class="text-muted" href="#">メニューアイテム5</a></li>
          <ul>
        </div>
      </div>
    </div>
    <!-- /.container -->

    <!-- 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 サイズ以上の画面幅の場合、以下のようにフッターが 3 分割で表示されたら OK です。

スマホなどの画面幅が狭い端末では、以下のようにフッターが 2 分割（カラム落ち）で表示されたら OK です。

まとめ

このレッスンでは Bootstrap のグリッドシステムを利用した 3 分割レイアウトについて学んでいきました。

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

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

【公式リファレンス】

おめでとうございます！🎉
このチュートリアルはこれで終了です。
次のコースを探す