2009年08月10日

[Webツール][CSS]簡単グリッドレイアウト The 1KB CSS Grid

The 1KB CSS Grid


いわゆる「グリッドレイアウト」用のCSSを作成してくれます。


※グリッドレイアウトとは?

グリッドレイアウトというのは、

ウェブページをいくつかのグリッド(格子)に分けて

おのおののグリッドに対して、コンテンツを配置していくことで

統一的なデザインのウェブページを作ろうというレイアウト技法です。

・・・横文字ばかりで分かりづらいですね。すいません(汗)

百聞は一見にしかず、ということで下の画像を見るのが分かりやすいでしょう。

グリッドレイアウトの例

まぁ、要はこんな感じの格子の中にコンテンツを詰めていくというわけですね。

ちなみに「3」とか「6」とかは、
「3格子分の幅」「6格子分の幅」というのを分かりやすくするためにつけてます。

幅を統一することで、統一感のあるデザインになるというわけです。


●ツールの簡単な使い方

・Number of Columns 横方向の格子数
・Column Width 一つの格子の幅(px単位)
・Gutter Width 格子の間隔(px単位)

をそれぞれ設定すると、右側に「=960px」とか幅が計算されて表示されます。

「Download」を押せば、スタイルシートと、サンプルHTMLをダウンロードできるので、あとは色々と試してみればよいでしょう。


HTMLの書き方とかは、CSSが分かる人ならサンプルのソースを見れば分かるはず。


posted by kanko at 21:17| Comment(0) | TrackBack(0) | HP作成 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/125425875
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。