この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Bootstrap4で作る最強WordPressオリジナルテーマ開発 その4 グリッドシステムとブレークポイント

前回はBootstrapにはカラムという概念があり、合計して12になるように設計する、という話をしました。
今回はレイアウトグリッドのブレークポイントとサイズについてです。

カラムにはブレークポイントというものが設定されています。画面幅のサイズに合わせてカラムを改行するポイントをブレークポイントと呼びます。以下にサイズ表としてまとめました。

サイズデバイス
Extra Small(col-xs-*)544px未満スマホサイズ
Small(col-sm-*)544px以上 768px未満スマホ横&タブレットサイズ
Medium(col-md-*)768px以上 992px未満タブレットサイズ
Large(col-lg-*)992px以上 1200px未満PCサイズ
Extra Large(col-xl-*)1200px以上PCサイズ大

カラムを変化させたくない場合は「col-xs-」を指定しておけば、それ以下の画面幅が設定されていないのでカラムが変化しません。
注意点として、Bootstrapのグリッドには各カラム間にガター(余白)が設定されていることです。
左右に15pxずつ合計で30pxのあそびが設定されています。
なので公式情報では各サイズの最大カラム実寸は以下の通りです。

Extra SmallSmallMediumLargeExtra Large
サイズAuto576px720px940px1140px

実はcontainerクラスにはもう1つ「.container-fluid」というクラスがあります。
「container」を「container-fluid」に変えると、画面幅いっぱいに広がります。
画面幅で成り行きでグリッドを作りたい場合は、「container-fluid」を使います。

<div class="container-fluid">
	<div class="row">
		<div class="col-md-6">6</div>
		<div class="col-md-4">4</div>
		<div class="col-md-2">2</div>
	</div>
</div>

▼サンプル1

前回はBootstrapにはカラムという概念があり、合計して12になるように設計する、という話をしました。 今回はレイアウトグリッドのブレークポイントとサイズについてです。
/04_dfa5/01.html

ここでお分かりの通り、Bootstrapでは固定幅には対応していないため、12カラムの組合せの中で近似値を探すことになります。

関連記事