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切替」で指定できます。