DEX-GRID

設定方法

1・グリッド基本設定

グリッドの骨格をつくるための設定です。
「プリセット選択」のプルダウンリストに目的の数値があれば、選択する事で入力をショートカットできます。

基準幅

グリッドの「container要素」の初期幅を指定します。
ここで入力した値が、そのまま初期幅におけるwidthのpx値になります。

カラム分割数

基準幅を横に何等分するかを指定します。
一般的なグリッドシステムは、12、16、24で等分しますが、他の数字のものも作成できます。

余白（ガター）

カラム同士の余白を指定します。
基準幅に対する分割数と余白の組み合わせで最小カラムの幅が決まります。

2・マークアップ用の設定

グリッドを、任意の命名（class属性）でマークアップするための設定です。
「プリセット選択」のプルダウンリストに使い慣れた命名があれば、選択する事で入力をショートカットできます。

container要素

グリッドの大外枠となる「container要素」の命名をおこないます。
任意の半角英数字が使用できます。

row要素

グリッドを縦方向に分割するための要素です。
任意の半角英数字が使用できます。

col要素

「row要素」内部で横方法に分割するための要素です。
任意の半角英数字が使用できます。

ここで入力する文字列がプレフィックスとなり、カラムの数は数字出力となります。

カラム移動用

カラムをグリッドに沿って左右に移動させるためのオプションclassです。
任意の半角英数字が使用できます。

ここで入力する文字列がプレフィックスとなり、移動するカラムは数字出力となります。

3・レスポンシブ設定

グリッド専用のレスポンシブ設定をおこなうための設定です。

設定を有効にするには、ジェネレータの「レスポンシブ設定を使用する」をチェックします。
このチェックが外れていると、レスポンシブ用のCSSは出力されず、グリッドはスタティックな状態を維持します。

「プリセット選択」のプルダウンリストから、代表的な設定をショートカット入力できます。

ブレイクポイント(BP)の設定をおこなう

グリッド専用のブレイクポイントは、最大で15個まで設定できます。
「設定枠」のBP1～15がこれに該当し、「有効」にチェックする事でその枠が利用できます。

この「設定枠」のBP1～15は、連番による単なる名称です。
上から順に有効にしても、間を空けて有効にしても、ブレイクポイントの数値が同じであれば、出力されるCSSの内容は変化しません。

※行の上下の入れ替えはおこなえないため、間を空けて設定した方が後に追加しやすくなります。

ジェネレータ設定手順

  1. 「ブレイクポイント設定」の設定枠（BP1～15）のうち、使用したい行の先頭にチェックをいれ、有効化します
  2. 必要に応じて、有効化した設定枠のブレイクポイントの数値を入力（変更）します

ここまで設定すると、有効化したBP（ブレイクポイント）を起点に、以下の設定がおこなえるようになります。

containerのフルード化を設定する

グリッドの大外枠である「container要素」を、px固定値から、100%の相対値に変換するポイントを設定できます。

設定できるポイントは2種類あります。
画面幅を狭くしていく考え方において、どの狭さで切り替えるか。と、
画面を広くしていく考え方において、どの広さで切り替えるか。です。

それぞれ、個別に有効無効を設定し、併用することもできます。

ジェネレータ設定手順

  1. 「containerフルード化」の項目の、「狭方」「広方」のいずれか、もしくは両方をチェックして機能を有効にします
  2. 有効になっているBPの行と、上記の列がクロスしているラジオボタンをクリックします

2 で指定したBPの画面幅の時に「container要素」の幅指定が切り替わります。

カラム余白（ガター）の変更

「containerフルード化」の設定を有効にした場合、フルード化と同じタイミングでカラムの余白（ガター）を変更できます。

「狭方」「広方」それぞれの列の末尾にある「余白の上書き」の項目にピクセル数を入力します。

@media切替を設定する

この設定は、「レスポンシブ制御用Class」専用のもので、カラム制御をどの規則で上書きするのかを指定できます。

ジェネレータ設定手順

  • PC向け表示を先に作成してモバイル対応するなど、
    常に画面が小さくなる方向で「レスポンシブ制御用Class」を使用する場合には、「∞」を選択します。
  • モバイル向け表示を先に作成してPC対応するなど、
    常に画面が大きくなる方向で「レスポンシブ制御用Class」を使用する場合には、「0」を指定を選択します。
  • 小さくなる方向でも大きくなる方向でも「レスポンシブ制御用Class」を使用する場合には、
    切り替えの起点となるポイントを、有効にしているBPから選択します

CSS出力仕様

CSSは、選択した設定枠の数値をもとに、以下の仕様で出力されます。

  • 選択したBPより狭い画面幅
    • 入力数値を含むmax-widthで順次出力
    • 「レスポンシブ制御用Class」の指定は、より小さな画面幅の時に上書きできる
  • 選択したBPより広い画面
    • 設定数字＋1のmin-widthで順次出力
    • 「レスポンシブ制御用Class」の指定は、より大きな画面幅の時に上書きできる

設定内容の確認

レスポンシブ設定によって出力されるCSSの内容は、同エリアの右側に表示されているブロックで視覚的に確認できます。