グリッドレイアウトのためのちょっと便利な背景画像

SPONSORED LINK

情報をきれいに配置するためのグリッドレイアウトは大事ですよね。その資料がいろいろまとまったサイトでちょっと便利そうな背景画像を紹介されていました。

grid-background.gif

» Web Page Layout Grid | Smiley Cat Web Design

テストの時にはこれを使うと便利かもですね。スタイルシート的にはこんな感じかな(ファイル名は適当に変えてくださいな)。

body {
  margin: 0;
  padding: 0;
  background:transparent url(/images/background-grid.gif) repeat 0 0;
}

↑ コードを書くとつっこまれやすいのでちょっと怖い・・・が、勉強だと思って晒しておきます。

これを配置しておけばちょっと新しいパーツを作りたいときに簡単にサイズの見当をつけられたりするかもですね。

グリッドレイアウト(グリッドシステムって言うのかな?)に関するほかの資料はこちらをどうぞ。

» Grid systems in Web Design

■ 追記(2007-03-08)

あきやんがこれのブックマークレットを作ってくれました・・・便利かも。素敵。よろしければどうぞ!http://www.akiyan.com/cgi/mt/mt-tb.cgi/330

» グリッドレイアウトブックマークレットを作りました : akiyan.com

SPONSORED LINK

このエントリーを共有する

  • このエントリーをはてなブックマークに追加