memo.xight.org

日々のメモ

ウェブデザイン向け定規とグリッド

Summary

ページの背景画面に定規のイメージを配置し,
CSS による要素の配置や微調整を行いやすくする.

layout_grid.gif

layout_grid.gif (GIF 画像, 1200x800 px)
http://www.smileycat.com/miaow/archives/images/misc/layout_grid.gif

利用例

Smiley Cat Web Design - Web Page Layout Grid
http://www.smileycat.com/miaow/archives/layout_grid.html

grid.gif

grid.gif (GIF 画像, 200x200 px)
http://www.lucky-bag.com//appendix/gird-layout-tips/grid.gif

利用例

Lucky bag::blog: グリッドレイアウトのための背景画像のサンプル
http://www.lucky-bag.com//appendix/gird-layout-tips/grid-layout..html

Reference

Smiley Cat Web Design - 2006-07-16 - Using a Background Image Grid to Lay Out Your Web Site
http://www.smileycat.com/miaow/archives/000264.html

Lucky bag::blog - 2006-07-19 グリッドレイアウトのための背景画像
http://www.lucky-bag.com/archives/2006/07/grid-layout.html

via

秋元@サイボウズ研究所プログラマーBlog - 2006-07-19 - ウェブデザイン向け定規とグリッド
http://labs.cybozu.co.jp/blog/akky/archives/2006/07/background_image_for_webdesign.html