レイアウトの基本
BootStrapにおいてレイアウトをする際に押さえておいた方が知識をまとめます。主に下記3つの概念が重要になります。
- コンテナ
- グリッドシステム
- ブレイクポイント
コンテナ
BootStrapの最も基本的な要素です。グリッドシステムを使う場合BODYの直下に指定します。
コンテナの種類
固定幅コンテナ(container)
幅が基本的に固定だが、ブレイクポイントで幅は変化させれます。ブレイクポイントについては後述します。
可変幅コンテナ(container-fluid)
常にブラウザの幅いっぱいに広がる箱です。画面全体を使ったコンテンツに有効です。
グリッドシステム
横幅12分割で構成する仕組みです。rowクラスのdivの中にcolクラスのdivを配置していきます。colクラスは12を分割したい数分だけ並べて使います。
1 2 3 4 5 |
<div class="row"> <div class="col">A</div> <div class="col">B</div> <div class="col">C</div> </div> |
col-Nクラスを使うと具体的に幅のサイズを指定できます。
1 2 3 4 |
<div class="row"> <div class="col-5">A</div> <div class="col-7">B</div> </div> |
ブレイクポイント
レスポシブに複数デバイスを切り替えるために特定の画面幅で表示方法を切り替えるための手法です。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-数字」を使う。
スペーシング(余白)
下記の書式で指定します。
1 |
[property][sides]-[size] |
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では画面サイズに応じて要素の表示形式を変更することができる機能が用意されています。
表記法
二つの表記法があります。
1 2 |
d-[value] d-[breakpoint]-[value] |
breakpointを指定した場合は指定したブレイクポイントの幅以上に達した際に表示形式を変更します。
value
これらはCSSのdisplayプロパティの値に相当します。
記法 | 説明 |
---|---|
none | 非表示 |
inline | インライン表示 |
inline-block | インラインブロック表示 |
block | ブロック表示 |
table | テーブル表示 |
table-cell | テーブルセル表示 |
table-row | テーブル行表示 |
flex | flexコンテナ表示 |
inline-flex | flexインラインコンテナ表示 |
サイジングユーティリティとは?
要素の高さや幅を指定できるユーティリティです。
指定方法
横幅
基本
1 |
w-[サイズ] |
最大幅
画像の横幅がブラウザの最大サイズ以上になっていたとしても画像が横幅にぴったりくっつきます。また、ブラウザの横幅を狭めても横スクロールバーが表示されることがなくなります。
1 |
mw-[サイズ] |
縦幅
基本
1 |
h-[サイズ] |
最大幅
画像等を指定した場合は画像の高さが親要素の高さに追従した高さになります。
1 |
mh-[サイズ] |
指定できるサイズ
幅 | 説明 |
---|---|
25 | 25%の幅 |
50 | 50%の幅 |
75 | 75%の幅 |
100 | 100%の幅 |
auto | 自動算出した幅 |
この記事へのコメントはありません。