グリッドレイアウトのための背景画像

ウェブページをグリッドレイアウトするのであれば、あらかじめ CSS で背景画像にルーラーみたいな画像を指定しておけば制作時に便利じゃね？ってアイデア。

つうことで、自分が使いやすいと思う方眼画像をちゃちゃっと作ってみた。

ルーラーの最小単位は 5px で、それより若干濃い線が 10px 、さらに濃い線が 50px、んでもって薄いグレーの背景が 100px 単位って具合。カチッとしたレイアウトをしたいんであれば、確かにこのアイデアは良いかもね。

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/25

www.blogmemes.jp - ウェブページのレイアウトに便利な背景画像 (2006年7月20日 13:09): 今読んだ記事が気に入ったらブログミームズで投票して下さい！ウェブページをデザインする時にグリッドに合わせて作るならばリンク先の図は大変便利です。続きを読む

Go my way - グリッドレイアウトのための背景イメージ (2006年7月20日 19:17): CSSでレイアウトするとき、ものすごく便利かも。 Lucky bag::blog... 続きを読む

Go my way - グリッドレイアウトのための背景イメージ (2006年7月25日 20:22): CSSでレイアウトするときに便利な背景イメージ。続きを読む

Luv Design - レイアウトに便利な背景画像 (2008年5月14日 03:00): Webレイアウトを行うときに便利な小ネタです。以下の画像を作成中のHTMLの作業用背景にリピートで設定します。グリッド画像ルーラー... 続きを読む

tonta said:

なるほど・・・
こうすればコーディング時の正確な表示確認が
可能だし背景画像が無い状態よりかなりいいですね。
ちょっとしたひらめき最高です！
使わせて頂きます。

Neo said:

簡単な事なんだけど、意外とやらなかったですよねｗ
ですが、可変レイアウトの時は、あんまり使わないかもですね・・・

e-luck said:

>>tonta さん
確認しながらできるのが良いですよね。1px のズレとかすぐ気づきそうですし。

>>Neo さん
そうそう、確かに可変では微妙かもですね。absolute で何か配置したいって時くらいかな。