DEX-GRID

独自CSSグリッド生成ツール

DEX-GRID
beta ver.

グリッド基本設定

?
グリッドの基本設定

半角数字を入力するとグリッドがプレビューできます。

この設定は、詳細設定（次の画面のジェネレータ）に引き継がれます。

入力値は、キーボードの「↑」キー、「↓」キーでも変更可能です。

基準幅 px    分割数 分割    余白 px

PREVIEW

カラム幅：
?
カラム幅の端数表示について

プレビュー上に表示されているカラム幅に端数が出る場合は、数学的に演算された理論値で表示されています。

整数チェックで「ブラウザ上の実質幅は整数pxになりません」と表示されている状態では、崩れを起こさないよう各ブラウザが適宜widthを調整することがあります。

その際に各ブラウザのインスペクタ機能で表示されるピクセル数とプレビューの表示値に差異が発生する場合があります。

ブラウザが調整した後の値については各ブラウザのインスペクタを参照するか、JavaScriptで取得してください。

50 px

整数チェック： ●ブラウザ上の実質幅は整数pxになります ▲ブラウザ上の実質幅は整数pxになりません ×カラムの実数が0px以下になっています ×分割数が0以下になっています ×半角の数値以外が入力されています。

参考：Adobe Photoshop® CC 「ガイドレイアウト」設定手順

上記のプレビュー機能をデザイン時のグリッド設計に使用したり、
コーディングフェーズまでを見通した状態でデザインを起こしたい場合など、
同じ設定をPhotoshopに反映したい場合にご参考下さい。

Photoshopの設定手順

  1. カンバスの新規作成時に、幅を1040pxにする
  2. ツールバーの「表示 > 新規ガイドレイアウトを作成」を選択
  3. 以下の「グリッド設定値」の該当する値を入力
グリッド設定値
設定項目 値
列 チェックする
数 12
間隔 40px

※カンバスの左右に余白が必要な場合は、上記のステップでガイドを作成したのち、「イメージ > カンバスサイズ」で任意の幅に広げるか、
カンバスの新規作成時に余白を見越してサイズ指定し、ガイドレイアウトの「マージン」の「右」と「左」に余白の値を入力してください。

※「新規ガイドレイアウトを作成」はPhotoshopCC2014.2以降のバージョンで利用可能な機能です。

INTEGER GRID

分割数 12・16・24 の全てにおいて整数のカラムになるグリッドを、
基準幅：940px～1280px / 余白：20px～50px　の間でまとめた表です。

基準幅(px)／余白(px) 20222426283032343638404244464850
940●
968●
970●
972●
974●
976●
978●
980●
982●
984●
986●
988●
1014●
1016●
1018●
1020●
1022●
1024●
1026●
1028●
1030●
1032●
1034●
1036●
1060●
1062●
1064●
1066●
1068●
1070●
1072●
1074●
1076●
1078●
1080●
1082●
1084●
1106●
1108●
1110●
1112●
1114●
1116●
1118●
1120●
1122●
1124●
1126●
1128●
1130●
1132●
1152●
1154●
1156●
1158●
1160●
1162●
1164●
1166●
1168●
1170●
1172●
1174●
1176●
1178●
1180●
1198●
1200●
1202●
1204●
1206●
1208●
1210●
1212●
1214●
1216●
1218●
1220●
1222●
1224●
1226●
1228●
1246●
1248●
1250●
1252●
1254●
1256●
1258●
1260●
1262●
1264●
1266●
1268●
1270●
1272●
1274●
1276●

最小カラムが0px以下にならないもので、整数分割可能な基準幅のみを掲載しています。

●をクリックすると、ページ上部のグリッドのプレビューに、12分割固定で幅と余白の値が反映されます

OVER VIEW

独自のCSSグリッドを生成・ダウンロードできるサービスです。
任意のグリッドサイズを指定し、使い慣れたClass名に書き換えて出力できます。

コーディングのみならず、デザイン時のガイド設計ツールとして利用したり、
仕様の共有ツールとしても活用できます。

概要・特徴

グリッド基本仕様

  • グリッドの構造は、container、row、col の3要素
  • カラムはfloatで実装
  • containerの初期幅はピクセルによる指定
  • カラムは常時相対値(％)指定
  • 余白(ガター)はカラム内部paddingによるピクセル指定

レスポンシブ対応

  • 専用のブレイクポイントを15個まで設定可能
  • 指定のブレイクポイントでcontainerをフルード化
  • フルード化は、狭い方と広い方の2種類を指定可能
  • フルード化のタイミングで余白の変更が可能
  • オプションClassを「row要素」に付与してカラム制御
HTML記述サンプル グリッドCSSの仕様

対応ブラウザ

IE7 over / Safari / Firefox / Chrome / MS Edge

※floatカラムによるオールドブラウザ対応

※モダンブラウザ用に追加付与しているdisplay:flexのカラム高さ合わせが有効になるかは各ブラウザの仕様に準ずる

VIDEO

DEX-GRIDの概要紹介ビデオです。