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


Bootstrap4で作る最強WordPressオリジナルテーマ開発 その3 グリッドシステムをざっくり理解する

今回はレイアウトグリッドです。
Bootstrapの最大の特徴はなんといってもグリッドシステムです。
グリッドシステムはグリッドというように、レイアウトをマス目のように管理する仕組みです。
グリッドは閲覧する端末サイズによって可変するのが特徴です。

基本的にはテーブルタグに似ています。ただ、テーブルタグと違うことはカラム(列)が可変することです。
その昔、レイアウトはテーブルタグを使って制御することが流行りましたが、それと似たようなものです。
Bootstrapのグリッドは12のカラムによって構成されています。
なぜカラムが12なのかは深く考えずに、とりあえず12列あると覚えて下さい。
詳細はあとで説明しますが、こんな感じです。

<div class="container">
	<div class="row">
		<div class="col-md-1">1</div>
		<div class="col-md-1">2</div>
		<div class="col-md-1">3</div>
		<div class="col-md-1">4</div>
		<div class="col-md-1">5</div>
		<div class="col-md-1">6</div>
		<div class="col-md-1">7</div>
		<div class="col-md-1">8</div>
		<div class="col-md-1">9</div>
		<div class="col-md-1">10</div>
		<div class="col-md-1">11</div>
		<div class="col-md-1">12</div>
	</div>
</div>
Bootstrap 12カラム
Bootstrap 12カラム

カラムが12というのは、足して12ということです。
なのでこういったことも可能です。

<div class="container">
	<div class="row">
		<div class="col-md-8">8</div>
		<div class="col-md-4">4</div>
	</div>
</div>
Bootstrap 8対4のカラム
Bootstrap 8対4のカラム

ここでタグとクラスについて説明します。
Bootstrapでグリッドシステムを使う時の約束として、「container」というクラスを使います。
「container」というクラスを使うとBootstrapは「グリッドシステムを使うのだな!」と準備をします。
なのでBootstrap以外で「container」というクラスが使われていると、思わぬ誤作動を起こすことになります。バッティングしないようにBootstrapで使われているクラスは予約語として使わないようにしましょう。

次にカラムに対して「ロー(Raw=行)」というものがあります。カラムが横方向なので、ローは縦方向です。
「row」というクラスでカラムを囲む必要があります。
「ロー(行)」の中にカラムを入れ子に出来上がりです。
あまり意味はありませんが、こんな感じになります。

<div class="container">
	<div class="row">
		<div class="col-md-12">12</div>
	</div>
</div>

ここで三行目の「<div class=”col-md-12″>12</div>」のクラス名「col-md-12」はなにか? という疑問が生じると思います。
「col-md-12」はBootstrapのお約束で、CSSの規定ルールではありません。Bootstrapの独自ルールです。

BootstrapはCSSとJSファイルと2つのファイルを読み込みますが、動的に条件判断ができるのはJavaScriptを使っているためです。
「class属性」に「col-md-12」と付いているとこれはBootstrapのカラム設定なのだなと理解できる仕組みです。
この辺は、CSSだけでは実現できないためJavaScriptを使っているわけですね。

「col-md-12」というのは「ハイフン」区切りで3つのパートに分けられます。

「col」と「md」と「12」です。左から、カラムであるという宣言、画面サイズ、カラム数になります。
「md」というのは後で説明しますが、PCサイズを意味します。

流れとしてはBootstrapはまずクラスに「container」と付いているタグをピックアップします。
次に直下に「row」というクラスを探します。次に直下に「col-○○-○○」とあるものを探します。
仮に「row」が間違って「low」だったりすると、Bootstrapはそこで探索を諦めて、グリッドシステムを適用しません。

もう一度、さきほどのグリッドシステムの例をみてみます。

関連記事