HTML

グリッドのHTML

グリッドはdivタグのClass属性でマークアップします。
構成要素は「container要素」 > 「row要素」 > 「col要素」 の順にネストします。
Classの命名はそれぞれジェネレータで変更可能なため、実際のコーディング時には設定したClass名を記述して下さい。

HTML記述例

以下は、12分割グリッドにおいて、3等分のカラムを配置した例です。

	<div class="container">
	    <div class="row">
	        <div class="col-4"></div>
	        <div class="col-4"></div>
	        <div class="col-4"></div>
	    </div>
	</div>

グリッドのネスト

同じ仕様のグリッドをネストする場合、内部のグリッドは「row要素」から記述します。

	<div class="container">
	    <div class="row">
	        <div class="col-8">
	            <div class="row"><!--ネスト-->
	                <div class="col-6"></div><!--親のcol-8に対して半分の幅になる-->
	                <div class="col-6"></div><!--親のcol-8に対して半分の幅になる-->
	            </div>
	        </div>
	        <div class="col-4"></div>
	    </div>
	</div>
ネストしたカラムは、親の幅に対する%指定となります。
12分割グリッドの場合、ネストした.col-6は半分の値のため、親の.col-8幅に対して50%の幅で表示されます。

カラム移動用Class

カラム移動用のClassは、push-*pull-*それぞれの*に数字を入力して記述します。
例).push-3 → 指定したcol要素をカラム3つ分、右方向に移動する

Classの命名はそれぞれジェネレータで変更可能なため、実際のコーディング時には設定したClass名を記述して下さい。

HTML記述例

以下の例では、2つの「col要素」をそれぞれ左右に同じカラムの数だけ移動させる事によって、左右の表示位置を入れ替えています。

	<div class="container">
	    <div class="row">
	        <div class="col-6 push-6"></div> <!--※右にカラム6つ分移動-->
	        <div class="col-6 pull-6"></div> <!--※左にカラム6つ分移動-->
	    </div>
	</div>

この指定は、以下のような場合に利用できます。
・幅の狭いカラムをセンタリングする
・PC版ではHTML記述順に逆らって左右を入れ替えて表示したいが、モバイルの時にはHTML記述順の通りにカラム落ちさせる

レスポンシブ制御ClassのHTML

「row要素」に「レスポンシブ制御用Class」をマルチクラスで付与します。
このClassの命名はジェネレータからは変更できません。

HTML記述例

均等割り配置の記述

	<div class="container">
	    <div class="row sc3-b2">
	        <div class="col-3"></div>
	        <div class="col-3"></div>
	        <div class="col-3"></div>
	        <div class="col-3"></div>
	    </div>
	</div>

この記述の場合、初期状態では「row要素」の中で横に4つのカラムが並びますが、
sc3の画面幅の時には、b2の指定により、均等割りのブロックが2つづつ配置されます。
結果、「2ブロック×2段」の表示になります。

幅の率指定配置の記述

	<div class="container">
	    <div class="row sc1-b2-3_7">
	        <div class="col-6"></div>
	        <div class="col-6"></div>
	    </div>
	</div>

この記述の場合、初期状態では「row要素」の中で横に2つのカラムが並びますが、
sc1の画面幅の時には、b2-3_7の指定により、全幅に対し、3:7の幅でカラムが表示されます。

元のカラムが2つ以上設置されていた場合、3:7をワンセットとしてリピート配置される事にご注意下さい

複数指定

「レスポンシブ制御用Class」は、1つの「row要素」に対して複数付与できます。

<div class="row sc2-b1 sc3-b2 sc4-b3">

上記によって、sc*で指定したスクリーンサイズで、内部の「col要素」が指定した状態に変化します。

これらの制御の上書き方法は、ジェネレータの「レスポンシブ設定」における「@media切替」で指定できます。