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

個別記事

前後の記事

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

この記事が属するカテゴリー: CSS web&blog

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

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

gif画像（ご自由にどうぞ）: grid.gif (GIF 画像, 200x200 px)
実際に適用してみたサンプル: グリッドレイアウトのための背景画像のサンプル

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

2006-07-19T17:05:31+09:00 | コメント (3) | トラックバック (3) |

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:: http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/386

このリストは、次のエントリーを参照しています: グリッドレイアウトのための背景画像:

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

Go my way さんからのトラックバック: グリッドレイアウトのための背景イメージ; CSSでレイアウトするとき、ものすごく便利かも。 Lucky bag::blog... [続きを読む]; 2006年07月20日 19:17

Go my way さんからのトラックバック: グリッドレイアウトのための背景イメージ; CSSでレイアウトするときに便利な背景イメージ。 [続きを読む]; 2006年07月25日 20:22

コメント

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

Neo さんからのコメント: 簡単な事なんだけど、意外とやらなかったですよねｗ
ですが、可変レイアウトの時は、あんまり使わないかもですね・・・; 2006年07月20日 12:40

e-luck さんからのコメント

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

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

2006年07月20日 22:31

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を < 、> を > とそれぞれ置き換えてください。