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

2011年08月22日

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

何と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
>>関連リンク