【Bootstrap】「レイアウト」の基本、「スペーシング（余白）」、「ディスプレイユーティリティ」、「サイジングユーティリティ」について

レイアウトの基本

BootStrapにおいてレイアウトをする際に押さえておいた方が知識をまとめます。主に下記3つの概念が重要になります。

• コンテナ
• グリッドシステム
• ブレイクポイント

コンテナ

BootStrapの最も基本的な要素です。グリッドシステムを使う場合BODYの直下に指定します。

コンテナの種類

固定幅コンテナ(container)

幅が基本的に固定だが、ブレイクポイントで幅は変化させれます。ブレイクポイントについては後述します。

可変幅コンテナ(container-fluid)

常にブラウザの幅いっぱいに広がる箱です。画面全体を使ったコンテンツに有効です。

グリッドシステム

横幅12分割で構成する仕組みです。rowクラスのdivの中にcolクラスのdivを配置していきます。colクラスは12を分割したい数分だけ並べて使います。

col-Nクラスを使うと具体的に幅のサイズを指定できます。

ブレイクポイント

レスポシブに複数デバイスを切り替えるために特定の画面幅で表示方法を切り替えるための手法です。BootStrap4では下記4つの境目を定義しています。またグリッドシステムの際の分割に使用した「col-Nクラス」ですが横表示（PC用）と縦表示（スマホ用）を切り替える境目を指定するクラスが別途用意されています。（例えば、768px以上は全て横表示とするcol-md-Nクラス等）

• 576px
• 768px
• 992px
• 1200px

〜575px(Extra Small)

想定デバイスはなし。小型ディスプレイ、クラス接頭辞は「col-数字」を使う。

576px〜767px(Small)

スマホを想定、クラス接頭辞は「col-sm-数字」を使う。

768px〜991px(Medium)

タブレットを想定、クラス接頭辞は「col-md-数字」を使う。

992px〜1199px(Large)

PCを想定、クラス接頭辞は「col-lg-数字」を使う。

1200px〜(Extra Large)

大型ディスプレイを想定、クラス接頭辞は「col-xl-数字」を使う。

スペーシング（余白）

下記の書式で指定します。

property

CSSのマージン（外余白）かパディング（内余白）かを指定します。

記号	説明
m	マージン
p	パディング

sides

設定する辺を指定します。

記号	説明
なし	4辺全て
t	上辺
b	下辺
l	左辺
r	右辺
x	左辺と右辺
y	上辺と下辺

size

余白の幅を指定します。

記号	説明
0	0rem
1	0.25rem
2	0.5rem
3	1rem
4	1.5rem
5	3rem

ディスプレイユーティリティとは？

Bootstrapでは画面サイズに応じて要素の表示形式を変更することができる機能が用意されています。

表記法

二つの表記法があります。

breakpointを指定した場合は指定したブレイクポイントの幅以上に達した際に表示形式を変更します。

value

これらはCSSのdisplayプロパティの値に相当します。

記法	説明
none	非表示
inline	インライン表示
inline-block	インラインブロック表示
block	ブロック表示
table	テーブル表示
table-cell	テーブルセル表示
table-row	テーブル行表示
flex	flexコンテナ表示
inline-flex	flexインラインコンテナ表示

サイジングユーティリティとは？

要素の高さや幅を指定できるユーティリティです。

指定方法

横幅

基本

最大幅

画像の横幅がブラウザの最大サイズ以上になっていたとしても画像が横幅にぴったりくっつきます。また、ブラウザの横幅を狭めても横スクロールバーが表示されることがなくなります。

縦幅

基本

最大幅

画像等を指定した場合は画像の高さが親要素の高さに追従した高さになります。

指定できるサイズ

幅	説明
25	25%の幅
50	50%の幅
75	75%の幅
100	100%の幅
auto	自動算出した幅