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>© 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>© 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"
>詳細を見る »</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"
>詳細を見る »</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"
>詳細を見る »</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>© 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 公式のリファレンスをまとめておきますので、復習するときは以下の公式リファレンスも参考にしてください。
【公式リファレンス】
おめでとうございます！🎉
このチュートリアルはこれで終了です。
次のコースを探すこのチュートリアルはこれで終了です。