ガイド
ガイド
概要・特徴
DEX-GRIDについて
DEX-GRIDのジェネレータは、独自のCSSをジェネレータで生成し、ダウンロードできるツールです。
単なる「コーディング用の便利ツール」としてだけではなく、設計フェーズやデザイン制作といった他のフェーズでも利用したり、チーム内での仕様共有や連携をおこないやすくするために開発・公開しています。
CSSグリッドシステムとしての特徴
DEX-GRIDは、グリッドの大外枠である「container要素」の幅をpx指定し、任意のブレイクポイント（狭い方・広い方の2点）でフルード化できるCSSグリッドです。
カラムの幅指定は常に相対値(％指定)であるため、グリッドの大外枠である「container要素」をフルード化した時点ですぐにレスポンシブ対応に移行できます。
カラム幅は常に相対値ですが、フルード化されていない状態ではブラウザのレンダリング上で整数ピクセルになります。（※設定に依存しますが、整数チェック機能で確認できます）
レスポンシブ対応のカラム制御に関しては、「レスポンシブ制御用Class」を、カラムの親要素に付与します。
画面を確認しながら付与する事で、素早く目的のレイアウトに近づける事ができます。
サイトへの導入方法・手順
基本的な流れは、ジェネレータでグリッドの仕様を設定し、
ダウンロードしたCSSファイルをプロジェクトのファイルにインポートします。
導入方法・流れ
- ジェネレータで仕様の設定をおこない、CSSをダウンロード
- ダウンロードしたCSSをプロジェクトのファイルにインポート
- HTMLファイルにグリッドのコードを記述
- 必要に応じて各種オプションClassを記述
ジェネレータ設定方法
- グリッドの幅や分割数などの基本設定をおこなう
- グリッドのClass名を設定
- 必要に応じてレスポンシブ設定をおこなう
- ジェネレートボタンをクリックして、独自グリッドのCSSを出力
幅広い用途に対応
DEX-GRIDは、一般的なCSSグリッドシステムと同様に、サイト全体のレイアウトを組む事もできますが、
コンテンツの一部に局所的に組み込むこともできます。
グリッド全体を包括する「container要素」の左右に余計な余白を持たないため、求める幅の中でグリッドを組むことができます。
また、命名を変更する事によって、異なるサイズ・仕様のグリッドを併用しても干渉を受けないことからも、同一ページ内であっても、全体のレイアウトのグリッドと、部分的なグリッドを使い分けることができます。
上記の特性を生かし、デザインの時点で整数となるグリッドを使って設計すれば、一般的ではない割り付けであっても、コーディング時に再現できることを担保した状態で制作を進めることができます。
要件ごとのレスポンシブ対応
ジェネレータの設定により、プロジェクトごとの特性に応じたレスポンシブの挙動を使い分ける事ができます。
対応可能な使い分けは以下の4つです。
1・PCモニタを基準にモバイル対応
PCモニタを想定したサイズでデザインを起こし、小さなスクリーン向けにレスポンシブ対応をおこなう場合。
2・スマートフォンを基準に大きい画面へ対応
スマートフォンやファブレットなど、小さなモバイルデバイスのスクリーンを基準としたプロジェクトで、それよりも大きな画面への対応をおこなう場合。
3・狭い方向にも、広い方向にも対応
PCモニタやタブレットなどのスクリーンを基点に、より小さなスクリーンの対応と、より大きなスクリーン（PCのワイドモニタなど）への対応をおこなう場合。
4・レスポンシブ対応しない
プロジェクトの特性により、モバイル限定、PCモニタ限定など、スタティックな状態から変化させない場合。
※当サイトがこれにあたります。当サイトはウェブ制作で使用するものであり、制作はPCモニタなどの広い画面でおこなう事が主流であることから、モバイルでの表示最適化をおこなっていません。
コンテンツの一部として使う場合の用例
コンテンツの一部として利用する場合には、以下のようなケースで重宝するのではないかと思います。
写真ギャラリーのサムネイル配置
写真ギャラリーのサムネイルを整数グリッドで配置したい場合。
PCモニタでは整数ピクセルにより「ぼやけ」のないスタティックな状態で画像を表示し、モバイル対応では画面を確認しながら素早くカラムを落としたい場合。
ECサイトの商品一覧
写真ギャラリーと同様に、同じ幅でのリピートカラムを配置したい場合。
また、画面を縮小していく方向と、ワイドスクリーンなどの広げていく方向との両方で、カラムを落としたり繰り上げたりしたい場合。
コンテンツの左右配置
画像の配置と、見出し＋テキストを左右に配置するような場合に、PCではグリッドに沿って表示するが、モバイル対応では「タブレットの時は、横持ちで3:7くらい。縦持ちで4:6くらいで見せたいが、スマートフォンでは全幅にしたい」といった制御を素早くおこないたい場合。
仕様共有ツールとして
DEX-GRIDの機能は、コーディングのみならず、デザイン時の画面設計や、仕様共有ツールとして利用する事もできます。
以下は、機能に対する使い方・効果についての例です。
グリッドプレビューと整数チェック機能
デザイン時や、画面設計のフェーズでも使うことができます。
画面設計を伴うデザイン時には、様々なグリッド（レイアウト用のガイド）を検討しなければならない事もあり、こういった決定までのプロセスにおいて、候補となりえる全てのサイズを計算機で算出するには非常に時間がかかります。
プレビュー機能と整数チェック機能によって画面上で確認しながら検討しやすくなるため、決定までの検討段階の時間を短縮できます。
HOMEには、グリッドプレビューへ反映できる「整数分割になるグリッドの一覧表」を掲載していますので、是非ご覧ください。
独自仕様のグリッドを確認できるHTMLファイル
ジェネレートしてダウンロードしたファイルには、グリッドのデモとなるHTMLファイルを同梱しています。
このファイルにはジェネレータで設定したグリッドの仕様を記載しているため、ディレクター、デザイナー、マークアップエンジニア などの異なる担当者間での仕様伝達・共有をおこなう際の資料として使うことができます。
例えば、ディレクターが最適な画面有効幅のレンジを定め、デザイナーがそれをもとにレイアウト用のカラムを検討し、ディレクターが決定した時点でファイルをダウンロードしておく。
そのファイルをマークアップエンジニアに渡し、マークアップエンジニアがレスポンシブの設定をおこないCSSを生成してコーディング。といった事がおこないやすくなります。
ジェネレータの設定復元機能
ジェネレートしてダウンロードしたHTMLファイルのページ末尾には、ジェネレータの設定復元用のリンクボタンがあります。
これをクリックすると、当サイトのジェネレータページにアクセスし、同じ設定を既存入力した状態で表示できます。
この機能により、ファイルベースで仕様を引き継いだり、コーディングの途中でグリッドの基本設定は同じまま、ブレイクポイントを追加・変更できます。