designとhtmlとgrid system
デザインファイルでグリッドしいて、
それのカラム分けやってコーディングって手間はウェブやってる人ならだいたいやってると思うけど、
それを効率的に進められそうなファイルを配布しているのが上記のサイト。
いままで、自前のルールでやってたけど、ここで配布されているものの方が、
汎用性が高そうだったので、こちらに統一することにした。
デザイン・コーディングを専門でやるスタッフのいる組織だと、
各スタッフ、またはチームレベルで作業効率を良くする共通ルールがそれぞれあると思うんだけど、
これを使うようにしたほうがいいと思えるほど、よくできてる。
外注に出すときもこれに対応してるとハッピーなんじゃないかと。
↓日本語の紹介記事
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム | コリス
デザインテンプレート
で、早速自分のデザインテンプレートに組み込んでみた。
fireworksを使ってるのでその中で主な変更点は下記のとおり。
（配布されてるテンプレファイルの中にはphotoshop,illustratorはもとよりomnigraffleやvisioまであった。）
- ブラウザのフレームがないとどうもしっくりこないのでいれてある
- 右に素材をいろいろおけるスペースをあけた
- このグリッドのページをマスターページに設定
- メニュー項目を挿入
- 960.gsの設定にあわせたスタイルを仕込んだ（html text部分の文字間を150%にしたりとか）
コーディングルール
class指定するときは下記のルールにのっとっておけばいいっぽい。
（実践導入して間違ってたら修正予定）
grid_xのx部分の数字がカラムの幅指定prefix_xのx部分の数字が左マージンのカラム幅の指定suffix_xのx部分の数字が右マージンのカラム幅の指定push_xのx部分の数字が右に移動するカラム幅の指定pull_xのx部分の数字が左に移動するカラム幅の指定alphaが左マージンの削除omegaが右マージンの削除gird_xを指定したdiv タグの後に<div class="clear"></div>を挿入するのは必須- 背景画像を設定時に重宝する
clearfixも完備
違和感があったのは、
alphaって指定が透明度の指定と一瞬見間違えてしまうのと、
alpha,omegaをfirst,lastにした方がわかりやすいかなと思ったくらい。
基本的に、今までやってきた自己流コーディングをきれいにまとめてくれてる印象。
960.cssをのぞいてみたら、grid_xにfloat:left;display:inline;position:relativeを指定して位置指定してた。
その他
960_grid（解凍フォルダ）/sketch_sheets/960_sketch.pdf
にあるpdfファイルがペーパープロトタイピングやってる人には意外と使えるんじゃないかと。
最後に
- ウェブの開発フローを効率化するのと、
- そこで使われているルールを共通認識にしといて教える手間を省く
時間効率を考える上で、必要不可欠な要素で、常に求めていた部分だから、
これらに活かせる960.gsを発見できてうれしかった。
（シルバーウィーク中なので今後を考えてちゃんとまとめてみた）
この辺で時間の余裕をつくるようにして、演出とか表現力に使いたい。
