フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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はそこで探索を諦めて、グリッドシステムを適用しません。

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

コメント

  1. 2018/10/18(木) 17:51:01
    pipelineに特定のカラムの値に対してフィルタするような層を突っ込みたいんだけど、自分でfilterクラス書くしかない? 元々ないんかな
  2. 2018/10/18(木) 17:51:01
    @otinpotiwawa2 テーブルの横一行分のデータを格納するためのクラスだから、普通はテーブルごとに1つ作ると思う 各テーブルに共通カラムがあるときはベースエンティティを作って継承させるのはよくやると思う
  3. 2018/10/18(木) 17:51:01
    DBからモデル生成とかすらやらずに、ほしいテーブルの必要なカラムだけさらっと書いたクラスつくるだけで動くのヤバイとおもう DB側にForeign key張ってなくてもEFCore側で好きにリレーション張って運用できるので強すぎる
  4. 2018/10/21(日) 00:42:50
    RPGツクールMV Window_Optionsでカラムを2列にしたかったので、左右カーソルを親クラスであるWindow_Selectableと同じ内容にするために、Window_Options側の内容を親の内容で上書きしたんだけど、これって、super()みたいなcall()出来るんちゃうん?と思った所。
  5. 2018/10/21(日) 00:42:50
    私でも「ほとんど似たような処理なんだから、(どっちが良いかはわからないけど)抽象クラスかインタフェース経由して作れよ」とか「同じ構造なら判別カラム追加してテーブル統合するか正規化しろよ」とか考えられる程度には酷い。

記事に戻る

コメントを残す