WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』
- December 15th, 2006
- Posted in 便利ツール
- Write comment

なにかと便利なYahoo!のUIライブラリーに「Grids CSS」なるものがあります。自分でつくると面倒なCSSのレイアウトをテンプレートで提供してくれるものです。
この「Grids CSS」、ブラウザ対応がしっかりしていたり、ファイルサイズが軽量だったり、テンプレートが豊富だったりといいことづくめですが、いざ使うとなるとそれなりに説明を読み込んで(簡単だけど)手作業でレイアウトをつくっていく必要があります。
そこでその作業を簡単にできるようにWYSIWYGでジェネレーターを作った方がいます。こいつは便利です。
» YUI: CSS Grid Builder

↑ コントロールパネルはこんな感じ。
プレビューを見ながらカラムの数や横幅を指定していくと簡単にレイアウトができちゃいます。もちろんコードも瞬時に生成してくれます。
なお、これを使うには当然ですがYUIが必要になります。ダウンロード&説明は以下をどうぞ。
» Yahoo! UI Library: Grids CSS
CSSのレイアウトハックなんかを紐解いていた時期が懐かしいですね・・・いい時代になったものです。
こちらもあわせてどうぞ
ツイッターもやっています!
フォローはお気軽に!@taguchiまでどうぞ!





















どうも、初めまして。CSS Grid Builderの使用方法がわからない。英語のVideo説明を見たが、まだはっきりしないです。どこのサイトから、そのsoftか、又は、コードをコピーして、何処の自分のサイトのどの部分に貼り付ける(コピー)のか>?。いわゆる、簡単に写真を取りはずしたり、移動したり出来る事が簡単に出来るsoft ですか?
管理人ではありませんが、お返事を。
CSS Grid Builderは、Yahoo!が提供してくれているライブラリを利用して、直感的にCSS(カスケードスタイルシート)を簡単に生成するものです。
ちなみにCSSとはWEBサイトのデザインを制御するものです。HTMLのように手打ちもできますが、綺麗に作るにはそれなりの知識が必要ですので、CSS Grid Builderは便利、ということかと。