HTML・CSSデザインフレームワークを使ってみた

0.前置き

仕事で技術検証のためにWebアプリをよく作ります。
そのときにいつも困るのが見た目です。
色をどうしようとか、段組みをどうしようとか…。
本来、集中したいとこではないけど、つい気になってしまうし、苦手な分野です。
そこで同僚に教えてもらったのが、HTML・CSSデザインフレームワーク!(勝手に命名しました)
今回はいくつかフレームワークの例をあげ、実際にその1つを試してみようと思います。

1. HTML・CSSデザインフレームワークとは

素早く、それっぽい見た目のWebアプリを制作することを支援するデザインフレームワークです。
多くの場合、CSSとJavaScript、画像がセットになって提供されています。
指定されたclass属性をHTMLタグに追加するだけで、利用可能になる場合が多いです。

BootStrap曰く、

Built for and by nerds
Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.

すばらしい。まさしくこれを求めていました。

2. 代表的なフレームワーク

どんなフレームワークがあるのかぐぐって見ました。
良さそうなものを、列挙します。

  • 99Lime
    デザインが柔らか目。要素も少なくシンプル。
  • Bootstrap
    Twitterが作っているから、いまっぽい。
  • YAML
    いい感じ。
  • BlueTrip
    いい感じ。
  • 52framework
    いい感じ。

ざっとサンプルを見ただけでは、ちょっと判断できないですね。
利用方法も似たり寄ったりです。
拡張などを考慮しなくてよい場合は、見た目で決めてよいでしょう。
# そもそもデザインを作りこむ場合は、独自でフレームワークを用意すると思います。

3. 99Limeを使ってみた

私は99Limeを選びました!見た目がポップな感じで気に入ったので。
それで作ったページが以下のスクリーンショットです。
99lime_sample

制作時間は、99Limeのフレームワークセットをダウンロードしてから完成まで、1時間!
シンプルなクラス構成なので、99Lime上のチュートリアルで十分理解できます。

HTMLのコードを少し見てみます。たとえば、最初の段組みはこんな感じ。(最大12分割可能)

<div class="col_7">
 //左側
</div>
<div class="col_5">
 //右側
</div>

苦手なfloatとの戦いもさようなら。。。

Facebookっぽいマークがついたボタンはこんな感じ。

<button>
  Post to Facebook wall <span class="icon social blue">f</span>
</button>

アイコン作成の作業ともおさらば。。。

かなりお手軽です。

4.サンプルコード

サンプルコードはgithubにホスティングしてあります。
99limeのサンプル
スクリーンショットのindex.html

5. おわりに

HTML・CSSデザインフレームワークをしらべて、99Limeを使ってみました。
Webアプリの中身に集中したいときに効果を発揮します。感動ものです。
懸念としてはカスタマイズするときに、どれくらい制約があるのかぐらいです。
今日はこれでおしまい。