Bootstrap でページ作成 ④(2 分割のグリッドレイアウト実装)

所要時間:60分

前回のレッスンに引き続き、このレッスンでも「サービス紹介ページ」の制作を通して、Bootstrap の各種コンポーネントの扱い方を習得していきます。

このレッスンの目標

  • Bootstrap のグリッドシステムにおける「カラムの並び替え」を理解する
  • サービス紹介ページの 2 分割のサービス紹介レイアウト部分が完成している
  • サービス紹介ページのフッターレイアウト部分が完成している

このレッスンで作るもの

このレッスンの演習課題では、サービス紹介ページの 2 分割のサービス紹介レイアウト部分を作成します。(赤枠部分)

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

前回のレッスンでグリッドシステムの復習も出来ていますので、今回のレッスンでは「カラムの並び替え」について解説をした後、実際の演習課題に入っていきます。

カラムの並べ替え

Bootstrap のグリッドシステムでは、HTML の構造を変えずにコンテンツの視覚的順序を入れ替える仕組み(カラムの並び替え)があります。

カラムを並び替えるには、order-* クラス (*には数字が入ります)を指定することで、簡単に要素の順序を指定できます。

また、画面幅に応じた順序設定ができるように order-sm-*order-md-* のような、ブレイクポイントごとに順序を設定することも可能です。

以下に具体例となるサンプルコードを提示します。

    <h1>グリッドシステムにおけるカラムの並び替え</h1>

    <!-- オーダー指定なし -->
    <h2>通常のカラム配置</h2>
    <div class="container">
      <div class="row">
        <div class="col-md-4">第1のカラム(順序指定なし)</div>
        <div class="col-md-4 bg-warning">第2のカラム(順序指定なし)</div>
        <div class="col-md-4">第3のカラム(順序指定なし)</div>
      </div>
    </div>

    <!-- オーダー指定あり -->
    <h2>順序指定のカラム配置</h2>
    <div class="container">
      <div class="row">
        <div class="col-md-4 order-md-3">第1のカラム(順序指定は3)</div>
        <div class="col-md-4 order-md-1 bg-warning">
          第2のカラム(順序指定は1)
        </div>
        <div class="col-md-4 order-md-2">第3のカラム(順序指定は2)</div>
      </div>
    </div>

上記のコードを表示すると、以下のような結果となります。

このオーダークラスの特性を利用すると、柔軟にレイアウトの配置を変更できるため、HTML 構造はそのままでシンプルに見た目だけを変えることができます。

例えば、今回のレッスンでコーディングするサービス紹介のレイアウトは、PC サイズとスマホサイズでレイアウトの配置が異なります。

通常のカラム配置であれば、PC 表示の際に 1 列目のカラムは画像が左、文章が右側にあるので、スマホで見た際も上に画像、下に文章という順序になるはずです。

しかし、実際には 2 列目のカラム配置と同じように、1 列目をスマホで見ると上に文章、下に画像というレイアウト配置になっています。

これは、サンプルコードで確認したように order-md-* というクラスを指定することによって、md サイズ以上の画面幅ではコンテンツの配置(画像と文章)を入替えているためです。

カラムの並び替えに関する解説は以上です。

演習課題:グリッドシステムを利用した 2 分割のレイアウトとフッターを作成しよう

それではレッスンの演習課題として、サービス内容のレイアウト部分とフッターを実装してみましょう。

【TODO】

  • 前回のレッスンで作成した service.html の HTML ファイルを編集できる状態にしてください。
  • 【答え】に記載された見本コードを確認しながら、サービス内容の部分を service.html にコーディングしてください。
  • レッスンの「まとめ」に記載した公式リファレンスを参照して、各種ユーティリティの使い方を確認してください。

【答え】

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

service.html(完成コード:今回の演習課題分)

        <!-- サービス内容 -->
        <div class="row my-5">
          <!-- グリッドシステム:2分割(順番入替え) -->
          <div class="col-md-7 order-md-2">
            <h2>現役トップランナーによる、オンラインウェビナー</h2>
            <p class="lead">
              自身が学習している内容に近いオンラインウェビナーに参加することができます。
            </p>
          </div>
          <!-- グリッドシステム:2分割(順番入替え) -->
          <div class="col-md-5 order-md-1">
            <img
              src="https://placehold.jp/400x400.png"
              alt="画像の説明"
              class="img-fluid"
            />
          </div>
        </div>

        <div class="row mb-5">
          <!-- グリッドシステム:2分割 -->
          <div class="col-md-7">
            <h2>講義動画が見放題</h2>
            <p class="lead">
              最先端を歩んでいるトップランナーから、最先端の情報をインプット。インターネットになかなか出回らない、最先端の知識を学ぶことができます。
            </p>
          </div>
          <!-- グリッドシステム:2分割 -->
          <div class="col-md-5">
            <img
              src="https://placehold.jp/400x400.png"
              alt="画像の説明"
              class="img-fluid"
            />
          </div>
        </div>

        <hr />
    <!-- フッター -->
    <footer>
      <div class="container">
        <p class="float-right"><a href="#">TOPへ戻る</a></p>
        <p>&copy; 2021 マナジョブ</p>
      </div>
    </footer>

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

ステップ ①:サービス内容のレイアウトを配置するロークラスを実装する

下記のコードを学習コースの実装コードより下に追加します。( .container クラス の閉じタグである </div> の内側 )

service.html(追加コード)

        <!-- 追加コード:サービス紹介レイアウトを配置するロークラスを実装する -->
        <!-- サービス内容 -->
        <div class="row my-5">
        </div>

        <div class="row mb-5">
        </div>

        <hr />

ステップ ②:ロークラスの中に 2 分割のサービス紹介レイアウトを実装する

ステップ ① で追加したロークラスの中に、それぞれ 1 行目と 2 行目に分けて、以下のコードを実装します。

service.html(追加コード)

          <!-- 追加コード:2分割のサービス紹介レイアウトを実装する(1行目) -->
          <!-- グリッドシステム:2分割(順番入替え) -->
          <div class="col-md-7 order-md-2">
            <h2>現役トップランナーによる、オンラインウェビナー</h2>
            <p class="lead">
              自身が学習している内容に近いオンラインウェビナーに参加することができます。
            </p>
          </div>
          <!-- グリッドシステム:2分割(順番入替え) -->
          <div class="col-md-5 order-md-1">
            <img
              src="https://placehold.jp/400x400.png"
              alt="画像の説明"
              class="img-fluid"
            />
          </div>
          <!-- 追加コード:2分割のサービス紹介レイアウトを実装する(2行目) -->
          <!-- グリッドシステム:2分割 -->
          <div class="col-md-7">
            <h2>講義動画が見放題</h2>
            <p class="lead">
              最先端を歩んでいるトップランナーから、最先端の情報をインプット。インターネットになかなか出回らない、最先端の知識を学ぶことができます。
            </p>
          </div>
          <!-- グリッドシステム:2分割 -->
          <div class="col-md-5">
            <img
              src="https://placehold.jp/400x400.png"
              alt="画像の説明"
              class="img-fluid"
            />
          </div>

ここまでの、コードの追加イメージは以下のようになります。

この時点では、以下のようにサービス紹介レイアウトの部分が 2 分割で表示されます。

スマホサイズで表示した際も、以下のように表示されていれば OK です。(タイトルと説明文の下に画像が配置される)

ステップ ③:フッターレイアウトを実装する

それでは最後に、フッターのレイアウトを作成してページ作成を完了しましょう。

下記のコードをメインコンテンツの実装コードより下に追加します。( </main> タグの下側 )

service.html(追加コード)

    <!-- 追加コード:フッターレイアウトを実装する -->
    <!-- フッター -->
    <footer>
      <div class="container">
        <p class="float-right"><a href="#">TOPへ戻る</a></p>
        <p>&copy; 2021 マナジョブ</p>
      </div>
    </footer>

コードの追加イメージは以下のようになります。

完成版のコード

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

コメントは表示結果に直接影響を与えないので、記載の有無は問いません。表示結果が同じようになっていれば 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"
    />

    <!-- カスタムCSS -->
    <link href="css/service.css" rel="stylesheet" />

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

    <!-- メインコンテンツ -->
    <main>
      <!-- スライドショー(ここから) -->
      <div
        id="myCarousel"
        class="carousel slide mb-custom-6"
        data-ride="carousel"
      >
        <!-- カルーセルオプション:インジケーター -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <!-- カルーセル① -->
          <div class="carousel-item carousel-custom-item active">
            <svg
              class="bd-placeholder-img"
              width="100%"
              height="100%"
              xmlns="http://www.w3.org/2000/svg"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
              role="img"
            >
              <rect width="100%" height="100%" fill="#777" />
            </svg>
            <!-- カルーセルオプション:キャプション -->
            <div class="carousel-caption carousel-custom-caption text-left">
              <h5 class="carousel-caption-title">
                キャリアアップのための<br />越境型IT学習サービス
              </h5>
              <p>Webマーケティング・コーディング・ファイナンスなどが学べます</p>
              <p>
                <a class="btn btn-lg btn-primary" href="#" role="button"
                  >新規登録して、学習を始める</a
                >
              </p>
            </div>
          </div>
          <!-- カルーセル② -->
          <div class="carousel-item carousel-custom-item">
            <svg
              class="bd-placeholder-img"
              width="100%"
              height="100%"
              xmlns="http://www.w3.org/2000/svg"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
              role="img"
            >
              <rect width="100%" height="100%" fill="#777" />
            </svg>
            <!-- カルーセルオプション:キャプション -->
            <div class="carousel-caption carousel-custom-caption">
              <h5 class="carousel-caption-title">
                あらゆる分野を横断的に<br />学べる越境型IT学習サービス
              </h5>
              <p>
                フロントエンドコーディング、Webマーケティング・Webデザイン・ファイナンスなど、<br />横断的にあらゆる分野のITスキルを学習することができます。
              </p>
              <p>
                <a class="btn btn-lg btn-primary" href="#" role="button"
                  >サービス詳細を見る</a
                >
              </p>
            </div>
          </div>
          <!-- カルーセル③ -->
          <div class="carousel-item carousel-custom-item">
            <svg
              class="bd-placeholder-img"
              width="100%"
              height="100%"
              xmlns="http://www.w3.org/2000/svg"
              preserveAspectRatio="xMidYMid slice"
              focusable="false"
              role="img"
            >
              <rect width="100%" height="100%" fill="#777" />
            </svg>
            <!-- カルーセルオプション:キャプション -->
            <div class="carousel-caption carousel-custom-caption text-right">
              <h5 class="carousel-caption-title">カルーセルタイトル</h5>
              <p>
                ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。<br />ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
              </p>
              <p>
                <a class="btn btn-lg btn-primary" href="#" role="button"
                  >ボタンテキスト</a
                >
              </p>
            </div>
          </div>
        </div>
        <!-- カルーセルオプション:コントローラー -->
        <a
          class="carousel-control-prev"
          href="#myCarousel"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#myCarousel"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <!-- スライドショー(ここまで) -->

      <!-- 学習コース -->
      <div class="container">
        <div class="row mb-5">
          <!-- グリッドシステム:3分割 -->
          <div class="col-md-4 text-center">
            <img
              src="https://placehold.jp/180x180.png"
              alt=""
              class="img-thumbnail"
            />
            <h2 class="mt-3">Web制作コース</h2>
            <p>
              Web制作に必要なHTMLコーディングからWordPressテーマの作成、またモダンな言語であるReactなどを利用した、プログラミングを学習します。
            </p>
            <p>
              <a class="btn btn-secondary" href="#" role="button"
                >詳細を見る &raquo;</a
              >
            </p>
          </div>
          <!-- グリッドシステム:3分割 -->
          <div class="col-md-4 text-center">
            <img
              src="https://placehold.jp/180x180.png"
              alt=""
              class="img-thumbnail"
            />
            <h2 class="mt-3">Google Apps Script入門コース</h2>
            <p>
              Google Apps
              Scriptを利用して、日々の業務を効率化する方法を学びます。
            </p>
            <p>
              <a class="btn btn-secondary" href="#" role="button"
                >詳細を見る &raquo;</a
              >
            </p>
          </div>
          <!-- グリッドシステム:3分割 -->
          <div class="col-md-4 text-center">
            <img
              src="https://placehold.jp/180x180.png"
              alt=""
              class="img-thumbnail"
            />
            <h2 class="mt-3">Pythonコース</h2>
            <p>
              Pythonを利用したプログラミングを学習します。Pythonを利用したプログラミングを学習します。
            </p>
            <p>
              <a class="btn btn-secondary" href="#" role="button"
                >詳細を見る &raquo;</a
              >
            </p>
          </div>
        </div>

        <hr />

        <!-- サービス内容 -->
        <div class="row my-5">
          <!-- グリッドシステム:2分割(順番入替え) -->
          <div class="col-md-7 order-md-2">
            <h2>現役トップランナーによる、オンラインウェビナー</h2>
            <p class="lead">
              自身が学習している内容に近いオンラインウェビナーに参加することができます。
            </p>
          </div>
          <!-- グリッドシステム:2分割(順番入替え) -->
          <div class="col-md-5 order-md-1">
            <img
              src="https://placehold.jp/400x400.png"
              alt="画像の説明"
              class="img-fluid"
            />
          </div>
        </div>

        <div class="row mb-5">
          <!-- グリッドシステム:2分割 -->
          <div class="col-md-7">
            <h2>講義動画が見放題</h2>
            <p class="lead">
              最先端を歩んでいるトップランナーから、最先端の情報をインプット。インターネットになかなか出回らない、最先端の知識を学ぶことができます。
            </p>
          </div>
          <!-- グリッドシステム:2分割 -->
          <div class="col-md-5">
            <img
              src="https://placehold.jp/400x400.png"
              alt="画像の説明"
              class="img-fluid"
            />
          </div>
        </div>

        <hr />
      </div>
      <!-- /.container -->
    </main>

    <!-- フッター -->
    <footer>
      <div class="container">
        <p class="float-right"><a href="#">TOPへ戻る</a></p>
        <p>&copy; 2021 マナジョブ</p>
      </div>
    </footer>

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

スマホサイズで表示した際も、以下のように表示されていれば OK です。

まとめ

このレッスンでは Bootstrap のグリッドシステムを使用した 2 分割レイアウト方法について学びました。

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

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

【公式リファレンス】

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

メモが保存されました
メモ一覧を見る