ジェネレータ

1・グリッド基本設定

生成するグリッドの幅やサイズを設定します。[設定方法]

基準幅
?
基準幅

グリッドの有効幅(全体幅)を指定します。

この設定は、そのまま「container要素」のwidthpx値になります。

参考:「レスポンシブ設定」により、max-width:100%;に設定を切り替えるポイント(画面幅)を指定できます。

px
カラム分割数
?
カラム分割数

カラムの分割数を指定します。

分割数は、一般的な121624分割の他にも、任意の数字を指定できます。

分割
余白(ガター)
?
余白(ガター)

カラムの余白を整数で指定します。

ガターは、カラム内部の左右paddingとなります。

入力値の半分のpx値が各カラムの左右paddingに設定されます。連続する事で目的の余白となります。

px

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

グリッドを構成するClass名を設定します。[設定方法]

container要素
?
container要素

グリッド大外枠の要素です。
任意のClass名を指定できます。

row要素
?
row要素

グリッドを縦方向に分割する要素です。
任意のClass名を指定できます。

col要素
?
col要素

グリッドを横方向に分割する要素です。
ここで入力するのは接頭辞となる文字列です。

CSSに出力されるClass名は、.col-1.col-2 .col-3のように、入力した接頭辞の直後に数字が付与されたものとなります。

カラム移動用
?
カラム移動用

col要素をカラム単位で左右に移動させるオプションClassです。
ここで入力するのは接頭辞となる文字列です。

CSSに出力されるClass名は.push-1.push-2.push-3 のように、直後に数字が付与されたものとなります。

右移動用   左移動用

3・レスポンシブ設定

グリッド専用のレスポンシブ設定をおこないます。
有効にするには「レスポンシブ設定の使用」にチェックを入れてください。[設定方法]

?
レスポンシブ設定の使用

グリッドのレスポンシブ設定を有効にする場合はチェックしてください。

この設定をOFFにするとレスポンシブに関連するCSSは出力されなくなります。
グリッドをスタティックな状態のみで使用する場合には、チェックを外してからジェネレートしてください。

ブレイクポイント設定
?
ブレイクポイント設定

最大15個のブレイクポイントを任意に設定できます。

BP1~15までの数字は「設定枠」の名称です。
設定内容さえ同じであれば、どの項目を有効にしても出力されるCSSに差異は出ません。

container
フルード化
?
containerフルード化

「container要素」の幅を、px指定からmax-width:100%;に切り替えるポイントを指定できます。

設定を有効にするには、「狭方」「広方」にチェックを入れてから、有効になっているBPの行のラジオボタンをクリックしてください。

■狭方
→ 指定したBP以下すべての画面幅で「container要素」がフルード化

■広方
→ 指定したBPより大きい(+1px)すべての画面幅で「container要素」がフルード化

@media
切替
?
@media切替

カラムを制御するためのオプションClass専用の設定です。

@mmediaの画面幅指定(min-width max-width)を切り替えるポイントを指定できます。

全て統一したい場合は、「0」か「∞」の項目にチェックを入れてください。

有効 設定枠 数値指定  
 
 
0px
 
 
BP1
px
BP2
px
BP3
px
BP4
px
BP5
px
BP6
px
BP7
px
BP8
px
BP9
px
BP10
px
BP11
px
BP12
px
BP13
px
BP14
px
BP15
px
 
 
 
 
  余白の上書き
?
余白の上書き

containerのフルード化と同じタイミングで、カラム同士の余白を任意のピクセルに変更できます。

例えば、以下のような挙動の設定ができます。

例:基本設定で40pxの余白を、狭い画面幅では20pxにし、逆に広い時には60pxにする

px px  
CSS出力
?
CSS出力

出力されるCSSのレスポンシブ設定に関する項目をプレビュー表示しています。

フルード化
?
フルード化

containerフルード化するポイントを表示しています。
参考情報、出力内容確認としてお使いください。

■狭方
→ 指定したBP以下すべての画面幅で「container要素」がフルード化

■広方
→ 指定したBPより大きい(+1px)すべての画面幅で「container要素」がフルード化

画面幅
 
狭方
(max-width)
広方
(min-width)
0px
狭方
(max-width)
広方
(min-width)
320px 321px
狭方
(max-width)
広方
(min-width)
375px 376px
狭方
(max-width)
広方
(min-width)
414px 415px
狭方
(max-width)
広方
(min-width)
568px 569px
狭方
(max-width)
広方
(min-width)
667px 668px
狭方
(max-width)
広方
(min-width)
736px 737px
狭方
(max-width)
広方
(min-width)
800px 801px
狭方
(max-width)
広方
(min-width)
960px 961px
狭方
(max-width)
広方
(min-width)
1024px 1025px
狭方
(max-width)
広方
(min-width)
1280px 1281px
狭方
(max-width)
広方
(min-width)
1366px 1367px
狭方
(max-width)
広方
(min-width)
1400px 1401px
狭方
(max-width)
広方
(min-width)
1600px 1601px
狭方
(max-width)
広方
(min-width)
1680px 1681px
狭方
(max-width)
広方
(min-width)
1920px 1921px
狭方
(max-width)
広方
(min-width)
?
レスポンシブ制御用のClassを使用

レスポンシブ制御用ClassのCSS出力を指定できます。

この設定をOFFにすると、オプションのCSSは出力されません。

@media
?
@media

左の表の各種設定により生成される画面幅と、メディアクエリの指定方法を表示しています。
参考情報、出力内容確認としてお使いください。

グレーの状態ではCSSには出力されず、左の表の設定のプレビューのみとなります

スクリーン名 Class
?
レスポンシブ制御用Class

レスポンシブ設定に応じてcol要素を制御するためのClassです。
row要素にマルチクラスで付与します。

詳細

     
max-width min-width
0px
   
max-width min-width
320px 321px
   
max-width min-width
375px 376px
   
max-width min-width
414px 415px
   
max-width min-width
568px 569px
   
max-width min-width
667px 668px
   
max-width min-width
736px 737px
   
max-width min-width
800px 801px
   
max-width min-width
960px 961px
   
max-width min-width
1024px 1025px
   
max-width min-width
1280px 1281px
   
max-width min-width
1366px 1367px
   
max-width min-width
1400px 1401px
   
max-width min-width
1600px 1601px
   
max-width min-width
1680px 1681px
   
max-width min-width
1920px 1921px
   
max-width min-width
   
sc100px) .sc1-b[1~12]
.sc1-b2-数字_数字
sc200px) .sc2-b[1~12]
.sc2-b2-数字_数字
sc300px) .sc3-b[1~12]
.sc3-b2-数字_数字
sc400px) .sc4-b[1~12]
.sc4-b2-数字_数字
sc500px) .sc5-b[1~12]
.sc5-b2-数字_数字
sc600px) .sc6-b[1~12]
.sc6-b2-数字_数字
sc700px) .sc7-b[1~12]
.sc7-b2-数字_数字
sc800px) .sc8-b[1~12]
.sc8-b2-数字_数字
sc900px) .sc9-b[1~12]
.sc9-b2-数字_数字
sc1000px) .sc10-b[1~12]
.sc10-b2-数字_数字
sc1100px) .sc11-b[1~12]
.sc11-b2-数字_数字
sc1200px) .sc12-b[1~12]
.sc12-b2-数字_数字
sc1300px) .sc13-b[1~12]
.sc13-b2-数字_数字
sc1400px) .sc14-b[1~12]
.sc14-b2-数字_数字
sc1500px) .sc15-b[1~12]
.sc15-b2-数字_数字
sc1600px) .sc16-b[1~12]
.sc16-b2-数字_数字

以下のファイルをZipファイルにてダウンロードします。

  • HTMLデモァイル(グリッド確認用)
  • 設定したグリッドのCSSファイル
  • 上記と同じ内容のSassファイル