CSS

グリッド構成要素

グリッドを構成する基本要素です。

要素名

それぞれの要素に対するClass名は、ジェネレータで指定できます。

要素 役割 仕様
container要素 グリッドの大外枠
CSSの幅指定はジェネレータの「基準幅」で入力したpx値。高さ指定なし
ジェネレータの「レスポンシブ設定」の「containerフルード化」の設定に基づき、px指定からmaxwidth:100%指定に切り替わる
overflow:hidden;指定 / marin:0 auto;指定
row要素 縦方向の分割
CSSの幅指定・高さ指定なし
「col要素」の片側の余白(padding)と同じ値を、両サイドのネガティブマージンに設定することで、表示上の不要な隙間を相殺
内部の「col要素」の高さ合わせが必要になるケースを考慮し、display:flexを指定
レスポンシブ制御用Class」を付与できる
col要素 横方向のカラム
CSSの幅指定は常に相対値(%指定) 高さ指定なし
※初期状態において、ブラウザ上でレンダリングされる実寸が整数のピクセル値になるかどうかは、ジェネレータで確認可能
カラム移動用Class」を付与できる

その他の仕様

異なるグリッドの併用

これらの要素はジェネレータでClass名を変更できるため、1ページ内で異なるサイズのグリッドを複数併用できます。

カラム移動用Class

グリッドカラムを左右に移動させるためのClassで、「col要素」にマルチクラスで付与できます。
命名はジェネレータで指定できます。

要素名

*の部分は数字を記述します。数字は、そのまま移動させたいカラム数になります。

要素 役割 仕様
.push-* 右方向に移動
*に入力した数字をもとに、そのカラムの数だけカラムを右に移動する
position:absolute;による実装
.pull-* 左方向に移動
*に入力した数字をもとに、そのカラムの数だけカラムを左に移動する
position:absolute;による実装

その他の仕様

  • ネストしたグリッドの「col要素」にも使用できる
  • 「グリッド基本設定」の分割数(最大カラム数)以上の数字指定はおこなえない
  • レスポンシブ制御用Class」の指定が有効になった場合には、カラム移動の指定は解除される

レスポンシブ制御用Class

カラムをレスポンシブ対応するためのClassです。命名は変更できません。
制御したい「col要素」の親要素(つまりrow要素)に以下のClassを付与することで、内部のカラムを制御できます。

要素名

Classの命名は意味を持っており、scは、対象画面を表し、bは、カラムの数を表しています。
それぞれ、「screen」と「block」という語句の省略形です。
sc*がどの画面幅にあたるのかは、ジェネレータで確認可能です。

要素 役割 仕様
.sc*-b* 均等割り配置
*に入力した数字をもとにカラムが組み変わる
sc*の画面幅の時に、カラムはb*の数で幅を均等割りして配置される
例) sc2-b3
→ sc2の画面幅の時に、「col要素」を3等分して一列に表示する
sc*-b2-*_* ブロック率指定配置
sc*の画面幅の時に、カラムはb2で配置(全幅に対して2づつ表示)
それぞれの幅は、*_*に入力した数字で%指定がおこなわれる
例) sc*-b2-2_8
→ sc*の画面幅の時に、「col要素」を2つづつ「2:8」の比率で表示
使える指定は、2:8、3:7、4:6、6:4、7:3、8:2の6種類

その他の仕様

  • ブロック指定オプションは1つの「row要素」に対して複数設定する事が可能
  • 全てのスクリーンに対する設定をおこなう必要はなく、ジェネレータの「@media切替」で指定したBPを起点に、より広い方、より狭い方のスクリーンの時に挙動の制御を上書きできる

グリッドの詳細説明・解説

以下の情報は、グリッドのCSSに関する詳細説明・解説です。

col要素について

「col要素」(カラム)は、グリッドを横方向を分割するためのものです。「row要素」直下の子として配置します。
カラム自体の幅は、グリッド全体の幅と分割数、カラム同士の余白設定により算出されます。

カラムの幅指定

カラムの幅は、常に相対値(%指定)です。

グリッド全体が正しく整数で割り切れる数値を指定すれば、ブラウザ上でのカラム幅の初期値は整数ピクセルになるよう演算して出力します。
これにより、「デザインデータから切り出したカラムと同一幅の画像」を、幅100%指定して配置しても「ぼやけ」が発生しません。

余白の幅指定

グリッドの余白(ガター)は、「col要素」の左右のpaddingにより再現し、常に固定値(px指定)です。

ジェネレータで指定した数値の半分の値が、colの左右のpaddingに割り振られ、colが連続する事で目的の余白となります。
小数点以下が発生しないカラムを生成したい場合には、余白は偶数を指定して下さい。

row要素について

「row要素」は、グリッドの行(縦方向)の分割要素となります。直下の子要素に「col要素」を配置します。

この要素には幅の指定はなく、divタグのデフォルト状態、つまり、大外の「container要素」の幅いっぱいに広がります。

内部に配置する「col要素」は左右にpaddingが指定されているため、左端と右端の余白を相殺するために、指定と同じ幅のピクセル数でネガティブマージンを指定しています。

container要素について

「container要素」は、グリッド全体を包括する要素です。内部に「row要素」を配置します。

初期状態では固定値(px指定)で表示しますが、「レスポンシブ設定」で指定した画面幅で、固定値を相対値に切り替えることができます。
内部に配置する「col要素」は常に相対値指定(%)であるため、すぐにレスポンシブ対応に移行できます。

コンテナのフルード化は、ジェネレータにより2つのブレイクポイント(BP)が指定できます。

  1. 狭い方 … 主に基準幅より画面サイズが狭い時に、どのBPでフルード化するのか
  2. 広い方 … 主に基準幅より画面サイズが広い時に、どのBPでフルード化するのか

注意点

フルード化した時に、containerの外側に幅を抑える要素がないと、グリッドはブラウザ幅一杯に広がります。
目的の幅や左右の余白を制御するには、containerの外側に制御用のdivを置くなどの工夫が必要となります。

カラム余白の上書き

「container要素」のフルード化と同じタイミングで、カラムの余白を上書きする事ができます。

例えば、基本設定の余白が40pxで、「container要素」が小さい方向でフルード化したタイミングで20pxにし、逆に大きい方向でフルード化したタイミングで60pxにする。といった制御が可能です。

レスポンシブ時のグリッドの挙動

意図しないカラム落ち

「container要素」をフルード化し、ブラウザ幅を狭める方向で変化させると、特定の条件によってはカラムが落ちが発生します。

特定の条件とは、カラムの有効幅が0px以下になった場合です。
特に最小分割のカラムで発生しやすく、「col要素」内部に使用しているpx固定値のpaddingに押される形で次のカラムが落ちます。

しかし、カラムの内部有効幅を0px以下で使用することは考えにくく、 また、そのような状態になる前に、カラムの内容物(コンテンツ)の可読性や視認性が低下している場合がほどんどです。
実際の制作において支障がでる事の方が少ないため、これを正の仕様としています。

カラムの制御

「container要素」をフルード化して内部の「col要素」が率指定により元の比率を保って追従しても、どこかの画面幅で「コンテンツの可読性が落ちる」もしくは「間延びする」ポイントがきます。
この時に、カラムを落としたり、もしくはカラムを繰り上げたり、率を指定して目的の表示に近づけるために、「レスポンシブ制御用Class」を付与します。