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分割可能)
[sourcecode language=”html”]
<div class="col_7">
 //左側
</div>
<div class="col_5">
 //右側
</div>
[/sourcecode]
苦手なfloatとの戦いもさようなら。。。

Facebookっぽいマークがついたボタンはこんな感じ。
[sourcecode language=”html”]
<button>
  Post to Facebook wall <span class="icon social blue">f</span>
</button>
[/sourcecode]
アイコン作成の作業ともおさらば。。。

かなりお手軽です。

4.サンプルコード

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

5. おわりに

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

コメント

  1. ナカムラ より:

    こんにちは。プログラミング初心者の高校生ナカムラと申します。
    こちらのサイトはネットサーフィンをしてたどり着きました。初心者ながら、参考にさせて
    いただいております。

    私も、Webサイトを作るとき、デザインが苦手で、bootstrapのCSSフレームワークを使っておりましたが、ここで99limeなどが紹介されていて、とてもいいなと思い、ダウンロードしたのですが、使えないのです。汗

    初めての訪問にも関わらず、このようなおこがましいことは承知ですが、
    全くわからず、ここ三日程、調べているのですが、うまくいかなくてお手上げ状態なのです。

    bootstrapの場合ですと、html内において、では

    そして、の最後、すなわちの付近に

    を設置することで、bootstrapを使用することができました。

    この方法はドットインストールという初学者のために公開された動画で解説されたものを
    そのまま使ったので、bootstrapを使うことができました。

    ですが、99limeなどのサイトではもちろんのこと、Web内を調べてもこのような初歩的なこと
    に対して、記述してある記事がなかったので、質問させてください汗

    どうすれば、99limeをhtmlに記述してWeb上で使用することができるのか
    教えていただけませんか?

    ですが、お時間を取らせることになりかねないので、よろしければ
    99limeで作成されたhtmlを見せていただくことで、参考にして
    自分で学習致します。

    勝手な質問をしてしまって本当にすみませんが、よろしくお願いします。
                            ナカムラ

    • 84zume より:

      ナカムラさん

      こんにちは。84zumeです。ぜひお力になりたく。ソースをアップロードしますので、少々お時間ください。準備できたら、このページを更新します!

  2. […] 以前、「HTML・CSSデザインフレームワークを使ってみた」というポストを書きました。 こういったデザインフレームワークをWebアプリケーションフレームワークと組み合わせるときに、 少しだけですけど面倒な時があります。 ASP.NET MVC4でも同じです。テンプレートページを作るのとか…。 […]

タイトルとURLをコピーしました