2011年08月22日

TwitterのGridデザインCSS「Bootstrap」 @ ウェブ

img1 img2

何とTwitterがGridデザインCSSのフレームワークをリリースするとは思わなかった。ウェブページを公開している以上、スタイルシートでのレイアウトは必要になるので、その辺をまとめて公開したのだろうが、ちょっと意外。で、早速、そのGridデザインCSS「Bootstrap」を試してみた。

今まで、Yahoo!のGrids CSSや960 Grid System、Blueprintなど有りましたが、これらは本当にグリッドの部分だけに絞られていて、シンプルなのだけど、これだけでは全然格好良いサイトは作れない。レイアウトだけなので当然と言えば当然。個人的には、もう少し、簡単に見栄えの良くなるモノが有れば良いなと思っていたので、Bootstrapは丁度良いかも知れません。

試しに、960 Grid Systemで作られた某CMSのサイトを真似して、Bootstrapで作ってみて分かった事を少し書きます。

まず、ドキュメントが少な過ぎる。Bootstrapのサイト自体が、Bootstrapで作られているのですが、可成りカスタムの要素が入ってます。その辺はある程度分かれば参考になるのですが、初心者には辛いかも。リンクを貼ると挙動が違う部分は、もしかすると迷う事があるかも。

次に、フォーム関連。Bootstrap流の形式で表示するには、問題ないのですが、カスタマイズをしようと思った場合に、一度設定を外す必要がありちょっと不便。スタイルシートが一つになって居るので分かりやすいですが、出来たら、フォーム周りはファイルを別にして欲しいな。自分で切り離しても良いけど。

その他の部分に関しては概ね悪くないです。特に上部のナビゲーションメニュー周りは、topbarクラスを指定する事で、自動的に固定のナビゲーションメニューになってくれたり、タブバー風のメニューも簡単に出来るし、サイドメニューにした場合の、メニューリストも幾つか選べて、シンプルかつ綺麗で良い。グラフィックデザインが出来る人は、シンプルなグリッドデザイン用のCSSを使った方が良いと思いますが、デザインが不得意な人には、Bootstrapはお勧めですね。出来る事ならば、色の設定とか出来るアプリを用意して、まとめてスタイルシートの書き出しが出来る様にすると、一般の人も使いやすい気がします。

ただ、Bootstrapの場合、LESSを使わないと良さが半減なのかも。LESSって使った事がないので、今度試してみます。

Bootstrap, from Twitter
>>関連リンク

960 Grid System
>>関連リンク

YUI 2: Grids CSS
>>関連リンク

Blueprint: A CSS Framework | Spend your time innovating, not replicating
>>関連リンク

閲覧数: 2013 / はてなブックマークusers

関連商品

amazon.co.jp・詳細ページへ

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト