1. なぜ、BootStrapを学ぶのか、その理由

BootStrapは、ウェブサイトやWebアプリケーションを作成するWebアプリケーション・フレームワークです。フレームワークとは"枠組み"のことで、あらかじめ用意されたセットのことです。例えば、フォームやテーブル、ボタン、ナビゲーション、その他の部品が用意されていますので複雑なCSSを知らなくても簡単にグラフィカルなページが作れます。しかも、レスポンシブ対応といってパソコンだけでなく、タブレットやスマートフォンなど様々な画面の大きさに対応したサイトが比較的簡単に作成できます。BootStrapは米ツイッター社がオープンソースで提供しているため誰でも無償で利用可能です。

当社の研修では最低限の努力で最大のデザイン効果を出すためにBootStrapを使います。

なお、BootStrapのバージョンは5を使用しています。

BootStrap5のサイトをブックマークしておいてください。

ひとまず、この講座ではリンクにあるような自動車販売のWebサイトを構成しているBootStrapを理解することを当面のゴールとします。

2. BootStrapの雛形作成

以下の02-template.htmlのようなBootStrapの雛形を用意してください。

コメントに①のような番号を付けてソースコードの下の解説と紐づけてあります。コンテナの範囲が分かりやすいようにbg-primaryというクラスで色を付けています。（後述）

※なお、以下のソースコードは印刷時に見切れないように折り返している部分があります。

<!DOCTYPE html>
<html>

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"><!-- ① -->

	<!-- Bootstrap CSS -->
	<!-- ② -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<title>02-template.html</title>
</head>

<body>
	<div class="container bg-primary">
		<!-- ③ -->
		<h1>Hello, world!</h1>
	</div>
	<!-- ④ -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
		crossorigin="anonymous"></script>
</body>

</html>

＜解説＞

①この行はレスポンシブデザインに対応するために必要な記述です。レスポンシブデザインとは、パソコンだけでなく、スマホやタブレットなどの画面の大きさに対応して画面のレイアウトを変更する技術です。ブラウザのビューポート【viewport】とは、画面表示領域のことです。「content="width=device-width initial-scale=1」と記述したことで、ページの幅がデバイスのスクリーン幅に自動的に合わせられます。モバイルデバイスでの表示が最適化され、ユーザーがスクロールやズームをせずにコンテンツを閲覧できるようになります。

②BootStrapのCSSをCDN経由で読み込んでいます。CDN【Content Delivery Network】とはインターネット経由で様々なサービスを利用できるようにする技術です。したがって、この方法ではインターネット環境がないと動作しません。BootStrapを使う方法は他にもありますが、ひとまず、決まり文句として書いてください。

③「class = "container"」は、コンテナの名の通り、他のBootStrapの部品の入れ物です。コンテナを使用することで、このあと紹介するグリッドレイアウトを使ったレスポンシブデザインが可能になります。このようにBootStrapでは、各HTML要素のclassに決められたクラス名を指定することで、CSSに詳しくなくても、簡単にデザインを適用することができます。

④の記述は、Bootstrapで必要なJavaScriptの読み込みです。bodyの閉じタグの直前に書きます。

例題

上記のソースコードから「class="container"」を削除すると見た目はどのように変化しますか？（簡単に確かめるためにディベロッパーツールを使っても良い）

また、「class="container-fluid"」に変えると見た目はどのように変化しますか？
※英語の【fluid】には「流動的」という意味があります。その名のとおり、液体のように画面幅いっぱいに広げるクラスです。

ブラウザのタブで3つを比較してみてください。

3. レイアウトの調整

3.1 余白の扱い方

「余白を制するものはデザインを制する」

そんな言葉があるほどWebサイトにとっても余白は大切です。

Bootstrap 5では、要素の外側の余白のマージン（margin）と要素の内側の余白のパディング（padding）を設定するためのユーティリティクラスが用意されています。これらは「m」（margin）と「p」（padding）の接頭辞を使用しています。

これらのクラスは次のパターンに従います：

{m or p}{sides}-{size}

  • {m or p}:マージンの場合はm、パディングの場合はpを指定します。
  • {sides}:余白を適用する面を指定します。以下のオプションがあります：
    1. t - 上部（top）
    2. b - 下部（bottom）
    3. s - 左側（start）
    4. e - 右側（end）
    5. x - 横方向（X軸方向、つまり左右）
    6. y - 縦方向（Y軸方向、つまり上下）
    7. 省略 - 全方向
  • {size}は余白の大きさを指定します。0から5までの数値、またはauto（自動）を指定できます（0は余白なし、3はデフォルトサイズ、5は最大サイズ）。

具体的な例を見てみましょう：

  1. mt-0 - 上部のマージンを0に設定（余白なし）。
  2. pb-5 - 下部のパディングを最大サイズに設定。
  3. ms-auto - 左側のマージンを自動に設定（これはしばしば要素を右側に寄せるために使われます）。
  4. p-3 - 全方向のパディングをデフォルトサイズに設定。

例題

以下のh2要素のマージンとパディングの値を1ずつ大きくしたり、小さくしたりしながらその効果を確かめなさい。（簡単に確かめるためにディベロッパーツールを使っても良い）

<div class="container bg-light text-dark">
	<h2 class="mb-3 mt-5 p-2">入荷しました</h2>
</div>

3.2 右寄せと中央揃え

Bootstrap 5では、テキストやコンテナ要素の位置を制御するためのユーティリティクラスが提供されています。

テキストの位置を制御する

テキストの位置を制御するためには、以下のようなクラスを使用します。

右寄せ： text-endクラスを使用して、テキストを右寄せにできます。

<div class="container">
    <h2 class="text-end">テキストが右寄せになります</h2>
</div>

中央揃え： text-centerクラスを使用して、テキストを中央揃えにできます。

<div class="container">
    <h2 class="text-center">テキストが中央揃えになります</h2>
</div>

例題

以下のh2要素のテキストを右寄せと中央揃えにしなさい（簡単に確かめるためにディベロッパーツールを使っても良い）。

<h2 class="mb-3 mt-5">お問い合わせ</h2>

フレックスボックスを使用してコンテナ要素の位置を制御する

フレックスボックスとは、【Flexible Box Layout Module】のことで、その名の通り、フレキシブルにボックス要素をレイアウトできる部品です。ブロックレベルの要素位置を制御することができます。以下のクラスが使用できます。

右寄せ： justify-content-endクラスを使用して、フレックスアイテムを右寄せにできます。ただし、このクラスを使用するためには親要素が d-flexとなるように設定する必要があります。

<div class="container d-flex justify-content-end">
    <h2>この要素は右寄せになります</h2>
</div>

中央揃え： justify-content-centerクラスを使用して、フレックスアイテムを中央揃えにできます。同様に、親要素が d-flexとなるように設定する必要があります。

<div class="container d-flex justify-content-center">
    <h2>この要素は中央揃えになります</h2>
</div>

3.3 グリッドシステムで柔軟なレイアウトを実現する

Bootstrap 5のグリッドシステムは、ウェブページのレイアウトを効率的に設計するためのツールです。グリッドシステムは、画面の横幅を12列に分割します。開発者は12列のうち何列をコンテンツに割り振るかを考えることでコンテンツを思い通りに配置することができます。

なぜ、12列なのでしょうか？

12は1、2、3、4、6、12と6つの約数を持っているからですね。そのため、さまざまなレイアウト設定の要件に対応できるのです。例えば10列だと1、2、5、10の4つの約数しかなく、レイアウトのオプションが少なくなってしまいます。

グリッドシステムの基本

Bootstrapのグリッドシステムは、最大12列のレイアウトを提供します。各列は、デバイスのスクリーンサイズに応じて自動的に調整されます。どのスクリーンサイズに対して12の列をいくつ割り当てるかを考えて画面を設計していきます。

将棋盤を思い浮かべてみてください。ただし、9列ではなく横に12列の将棋盤です。将棋盤のマス目のように12列からなる行を用意してそのうちの、の何マスを個々の要素に割り当てるかを考えます。もともとグリッド【grid】とは格子状という意味です。

新人エンジニア研修
グリッドシステムの入れ物container

最初に理解すべきことは、「コンテナ【container】」です。これは、名前の通りページ上のグリッドシステム全体が入る入れ物です。.containerのようなクラスを使用して定義します。将棋盤で言えば将棋盤全体です。

水平方向のグループ.rowクラス

「行【Rows】」はコンテナ内の水平方向のグループです。.rowクラスを使用して定義します。1つの行は、12列のグリッドを含みます。

列幅を指定する.col-クラス

「列【Columns】」は各行の中に配置される列です。.col-クラスを使用して定義します。-の後ろには数値が入り、その数値はその列が占める幅（最大12）を指定します。

デバイスに応じた画面が作れるブレイクポイント

ブレイクポイントは【breakpoint】はその名の通り、レイアウトが変更されるポイントのことです。

Bootstrapは異なるデバイスサイズに応じて異なるグリッドの振る舞いを設定することができます。

ブレイクポイントは、xs（extra small）、sm（small）、md（medium）、lg（large）、xl（extra large）、xxl（extra extra large）の6つがあります。当社が想定している研修の環境では以下の3つのブレイクポイントを理解してください。

  • パソコン向けのlg（Large）：992px以上のビューポートで適用されます。
  • タブレット向けのmd（Medium）：768px以上のビューポートで適用されます。
  • スマートフォン向け：ブレイクポイントは上限を設定しますので、上記pxに当てはまらない場合はスマートフォン向けになります。

以下はパソコンとそれ以外（タブレット、スマホ）で異なるブレイクポイントを設定している例です。

＜アウトプット例＞

リンクの03-grid.htmlを御覧ください。

新人エンジニア研修

＜ソースコード＞

<div class="container">
	<div class="row bg-info">
		<div class="col-lg-1">
			パソコンなどの大きなデバイスで表示領域を12分割します。タブレットやスマホでは縦に並びます。
		</div>
		<div class="col-lg-1">
			パソコンなどの大きなデバイスで表示領域を12分割します。タブレットやスマホでは縦に並びます。
		</div>
		<!-- 以降10個同じコードを繰り返しのため省略 -->
	</div>
	<div class="row mt-4 bg-success">
		<div class="col-lg-3">
			パソコンなどの大きなデバイスで表示領域を4分割します。タブレットやスマホでは縦に並びます。
		</div>
		<!-- 以降3個同じコードを繰り返しのため省略 -->
	</div>
	<div class="row mt-4 bg-danger">
		<div class="col-lg-6">
			パソコンなどの大きなデバイスで表示領域を2分割します。タブレットやスマホでは縦に並びます。
		</div>
		<!-- 以降1個同じコードを繰り返しのため省略 -->
	</div>
</div>

例題

上記のソースコードのrowの中のcolの合計を12未満にしたり、12より大きくしたりするとどうなるかを確かめなさい。

上記のソースコードのクラスから「class="row"」を削除し、その効果を確かめなさい。

また、「class="col-lg-*"」を削除し、その効果を確かめなさい。

また、「col-md-*」を追加し、効果を確かめなさい。

<まとめ：隣の人に正しく説明できたらチェックを付けましょう>

□ CDNでBootstrapのcssとJavaScriptを読み込むことができる。

□ BootStrapを使うとレスポンシブ対応のサイトが作成できる

□ クラス指定するだけでHTMLの要素にBootStrapのデザインを適用できる

今回は「レイアウト編」でした。次は、「コンポーネント編」です。

最後までお読みいただきありがとうございました。

HTML講座の一覧に戻る

BootStrapで今風のデザインを実現する　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる