WYSIWYGでCSSレイアウトを超簡単に作れる『CSS Grid Builder』
December 15, 2006 9:25 AM written by 100SHIKI Apprentice

cssbuilder.gif

なにかと便利なYahoo!のUIライブラリーに「Grids CSS」なるものがあります。自分でつくると面倒なCSSのレイアウトをテンプレートで提供してくれるものです。

この「Grids CSS」、ブラウザ対応がしっかりしていたり、ファイルサイズが軽量だったり、テンプレートが豊富だったりといいことづくめですが、いざ使うとなるとそれなりに説明を読み込んで(簡単だけど)手作業でレイアウトをつくっていく必要があります。

そこでその作業を簡単にできるようにWYSIWYGでジェネレーターを作った方がいます。こいつは便利です。

» YUI: CSS Grid Builder

toobox.gif

↑ コントロールパネルはこんな感じ。

プレビューを見ながらカラムの数や横幅を指定していくと簡単にレイアウトができちゃいます。もちろんコードも瞬時に生成してくれます。

なお、これを使うには当然ですがYUIが必要になります。ダウンロード&説明は以下をどうぞ。

» Yahoo! UI Library: Grids CSS

CSSのレイアウトハックなんかを紐解いていた時期が懐かしいですね・・・いい時代になったものです。

この記事のトラックバックURL (トラックバックは承認後に公開されます)

コメント一覧

どうも、初めまして。CSS Grid Builderの使用方法がわからない。英語のVideo説明を見たが、まだはっきりしないです。どこのサイトから、そのsoftか、又は、コードをコピーして、何処の自分のサイトのどの部分に貼り付ける(コピー)のか>?。いわゆる、簡単に写真を取りはずしたり、移動したり出来る事が簡単に出来るsoft ですか?

by 高江洲 義二 | 2006年12月16日 16:31

管理人ではありませんが、お返事を。
CSS Grid Builderは、Yahoo!が提供してくれているライブラリを利用して、直感的にCSS(カスケードスタイルシート)を簡単に生成するものです。
ちなみにCSSとはWEBサイトのデザインを制御するものです。HTMLのように手打ちもできますが、綺麗に作るにはそれなりの知識が必要ですので、CSS Grid Builderは便利、ということかと。

by hibikicco | 2006年12月22日 02:45

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

Powered by
MovableType 3.33-ja

Icons powered by famfamfam.

人気ブログランキング - 100SHIKI
ワード