CSSレイアウト・ジェネレイター

CSSレイアウトのインスピレーションを得るために

5月 5th, 2009

色々とページを作っていると、たまには違うレイアウトにしょうか。
と思うこともしばしば。　しかしWebデザイナーではない人は
毎日レイアウトのことばかり考えるわけにもいきません。

さくっと何かかわったレイアウトはないかな？

CSS書くのは楽しいけど、はまると時間かかっちゃうしなぁ。

なんてお考えの貴方。

こちらのサイトでレイアウトのインスピレーションを得ちゃいましょう。

ついでにXHMLのコードとCSSをいただけちゃいますよ！

YUI CSS Grid Builder

ヤフー・ユーザー・インターフェース　CSSグリッド・ビルダー

左にあるメニューをちょちょいといじると、右側にレイアウトが
表示されます。ヘッダーとフッターも入れられます。

CSSボタンをおすとあら簡単。　CSSのコードが表示されます。

YUIのページはこちら

Layout Iron Myers

http://layouts.ironmyers.com/

こちらは下の写真に有るように、あらかじめ56種類のレイアウトが整列しています。

それぞれのレイアウトの下にラジオボタンがあります。
一番上が幅100%リキッドレイアウト。Fluid （流動体）とあります。
他には974ピクセルのリキッドレイアウト、950ピクセル、750ピクセル
と続きます。実はこの56種類の中にはあまり気に入ったのはないのですが
シンプルなレイアウトを何も考えずに使いたいときに利用しています。

Layout GALA

http://blog.html.it/layoutgala/

全39種類の中から好きなレイアウトをクリックすると、サンプルページが
次に現れ、すぐにコードをダウンロードできる仕組み。

個人的にはここのレイアウトは好みのものが多いです。
たぶんコンテンツ部分を2段にしたかったりだとおもうのですが。
とはいえ、そのままコードを使ったこと無いです。
かなり前から存在するサイトで、他のがジェねレートしているのに
比べるとここは決めうちですから、CSSジェネレイターではないです。
正確には。

CSS Creator

http://csscreator.com/tools/layout

これはCSSジェネレイターです。
ドキュメントタイプもHTMLからXHTML Strictまで選択でき、
また3つの単位(px,em,%)でカラムの値を指定してレイアウトしていきます。

縦に2列などはできませんが、普通の横3段組まで可能です。
バックグラウンドカラーもその場で選べるので雰囲気をあれこれ
見ておいて、他でそのレイアウトを選択すって言うのもありかも
しれません。　ちなみに値をいれると右に小さなレイアウト
が表示されますが、Hightの値が今ひとつ反映されていない気も。
ま、たぶん気のせいです。

mitchbryson

http://mitchbryson.com/free-css-templates

ここはシンプルです。　敢えてレイアウトの中から選びたい。
そんな気にしてくれるサイトです。

Nice and Free CSS Templates

http://www.mycelly.com/

ここもシンプルです。　レイアウトはたった12種類しか
ないのですが、中ほどのメニューをフローとさせたものと
下の段のBOXをページ中央におくレイアウトがおもしろいです。

普段かわったページを作ること無いので、こういうところをみると
ああ。なるほど。　となります。