はじめに
JavaScript について知ろう
Bootstrap でページ作成 ①（ヘッダーの実装）
Bootstrap でページ作成 ②（カルーセルの実装）
Bootstrap でページ作成 ③（3 分割のグリッドレイアウト実装）

このレッスンの目標
このレッスンで作るもの
グリッドシステムの使い方（復習）
演習課題：グリッドシステムを利用して 3 分割のレイアウトを作成しよう
1. ステップ ①：学習コースの大枠とタイトル部分を実装する
2. ステップ ②：学習コースの画像部分を実装する
3. ステップ ③：学習コースの説明部分を実装する
4. ステップ ④：学習コースのボタン部分を実装する
5. 完成版のコード
まとめ

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

Bootstrap でページ作成 ③（3 分割のグリッドレイアウト実装）

所要時間：60分

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

このレッスンの目標

Bootstrap のグリッドシステムの扱い方を理解（復習）する
サービス紹介ページの 3 分割の学習コースレイアウト部分が完成している

このレッスンで作るもの

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

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

それでは早速、Bootstrap の「グリッドシステム」の復習に入っていきましょう。

グリッドシステムの使い方（復習）

まず、Bootstrap のグリッドシステムを利用する際は、以下の 3 つのクラスが必要でした。

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

それぞれのクラスの使い方は、以下の図で示したようになります。

まず、グリッドシステムでレイアウト管理したいコンテンツをコンテナクラスの .container で囲います。

その中に、行を表すロークラス .row を行単位で定義していきます。ロークラスは、必要な行数分をコンテナクラスの中に配置します。

最後に、ロークラスの中に 12 分割で管理していくカラムクラス .col- を定義します。カラムクラスは全体で 12 分割になるように数値を決めていき、ロークラスの中に設置します。

例えば、今回の 3 分割の学習コースの場合は 4 つ分の幅を取るカラムクラスを 3 つ用意して、合計 12 カラムになるように分割すれば OK です。

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

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

演習課題：グリッドシステムを利用して 3 分割のレイアウトを作成しよう

それではレッスンの演習課題として、サービス紹介ページの学習コース部分を実装してみましょう。

【TODO】

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

【答え】

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

service.html（完成コード：今回の演習課題分）

      <!-- 学習コース -->
      <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>
      <!-- /.container -->

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

ステップ ①：学習コースの大枠とタイトル部分を実装する

下記のコードをスライドショーの実装コードより下に追加します。（ </main> タグの内側）

service.html（追加コード）

      <!-- 追加コード：学習コースの大枠とタイトル部分を実装する -->
      <!-- 学習コース -->
      <div class="container">
        <div class="row mb-5">
          <!-- グリッドシステム：3分割 -->
          <div class="col-md-4 text-center">
            <h2 class="mt-3">Web制作コース</h2>
          </div>
          <!-- グリッドシステム：3分割 -->
          <div class="col-md-4 text-center">
            <h2 class="mt-3">Google Apps Script入門コース</h2>
          </div>
          <!-- グリッドシステム：3分割 -->
          <div class="col-md-4 text-center">
            <h2 class="mt-3">Pythonコース</h2>
          </div>
        </div>

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

この時点では、以下のように学習コースのタイトル部分が 3 分割で表示されます。

ステップ ②：学習コースの画像部分を実装する

下記のコードを学習コースのタイトル上部にそれぞれ追加します。

service.html（追加コード）

<!-- 追加コード：学習コースの画像部分を実装する -->
<img
    src="https://placehold.jp/180x180.png"
    alt=""
    class="img-thumbnail"
/>

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

【補足】

ここで追加した画像は、ダミー画像を生成するサービスを利用しています。

以下の URL にアクセスして、生成する画像サイズ（縦横のピクセル数）を指定すれば、簡単にダミー画像の URL を取得できます。

ダミー画像生成ツール - Placehold.jp

引用：Placehold.jp

サンプル画像を埋め込みたいときなど、コーディングの実務でも利用できるサービスなので是非覚えておきましょう。

ステップ ③：学習コースの説明部分を実装する

下記のコードを学習コースのタイトル下部にそれぞれ追加します。

service.html（追加コード）

<!-- 追加コード：学習コースの説明部分を実装する -->
<p>
    Web制作に必要なHTMLコーディングからWordPressテーマの作成、またモダンな言語であるReactなどを利用した、プログラミングを学習します。
</p>

<!-- 追加コード：学習コースの説明部分を実装する -->
<p>
    Google Apps
    Scriptを利用して、日々の業務を効率化する方法を学びます。
</p>

<!-- 追加コード：学習コースの説明部分を実装する -->
<p>
    Pythonを利用したプログラミングを学習します。Pythonを利用したプログラミングを学習します。
</p>

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

ステップ ④：学習コースのボタン部分を実装する

下記のコードを学習コースの説明文の下に追加します。

service.html（追加コード）

<!-- 追加コード：学習コースのボタン部分を実装する -->
<p>
    <a class="btn btn-secondary" href="#" role="button"
    >詳細を見る &raquo;</a
    >
</p>

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

完成版のコード

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

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

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

まとめ

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

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

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

【公式リファレンス】

完了する

次のレッスン：Bootstrap でページ作成 ④（2 分割のグリッドレイアウト実装）

ノートをとる

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