cssフレームワークについて

最近というか結構前からもですが、cssのフレームワークについて耳にします。

『cssにフレームワークなんて必要ないんじゃない?』と思ってましたが、
海外なんかでは、けっこう使わているそうで・・・

気になったのでいろいろと調べてみました。

ちなみに気になったきっかけはこちらのブログから
allWebクリエイター塾 ブログ: 海外のカンファレンスで感じたこと3つの変化

lessやsassを当たり前のように記述しているとか、
そして、あとは、デザイナーだけど、プログラミングもできるという人が多くなってきているとのことです。
そこは、そうなるだろうと思っていたのでいいですが、cssのフレームワークが当たり前になっているとは・・・

では、調べたことに進みます。

cssのフレームワークといっても、
大きく分けて2タイプありそうです。

・既にcssが記述されているもの
→記述されたclassを使い、レイアウトをしていく

・cssを簡素化、便利に使用できるようになるもの
→関数みたいに使用できる・記述が楽になるが、自分で作る

まず、前者の
・既にcssが記述されているもの

ですが、これはもうそのままで、
cssのデータ等をダウンロードし、それをそのまま使います。
すでに様々なスタイルが記述されているので、ユーザーはそれを把握し、
好きなようにhtmlにclassをつけていけばいいだけになります。

以下のようなフレームワークがあります。
ほとんどhtmlが用意されており、jsやpsdがついているものもありました。
(psdはグリッドレイアウトのもとになるものが表示されているものですが)

960 Grid System

Prototyping

52framework – The framework from the future, HTML5, CSS3, and more!

YAML CSS Framework

the-golden-grid – The Golden Grid – Google Project Hosting

Simpl.css the simple css framework

BlueTrip CSS Framework | A beautiful and full-featured CSS framework

他にもまだまだありますが、とりあえずは上記まで。

こちらもフレームワークといえばフレームワークになりますね。
Twitter Bootstrap

まだ詳しく見ていないので、今後それぞれについて追記したいと思います。
いろいろ用意されていたため、予想以上でびっくりしました。
これは使用すると確かに便利かも・・と思いました。

次は、
・cssを簡素化、便利に使用できるようになるもの
ですが、こちらは、cssの記述を便利にするものなので
cssが予め用意されているわけではなく、あくまでcssを簡素化するためのものです。

それぞれファイルを読み込む必要があります。
要は、jqueryみたいな感じですね。
cssはjacascriptと違ってだいぶ簡単なので、そんなんいるかと思いきや、
割りと良さそうです。

Sass – Syntactically Awesome Stylesheets

LESS « The Dynamic Stylesheet language

この2つについての説明は下記リンクをご覧ください。

SassやLESSを導入するメリット | Good thinking

効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単! | Webクリエイターボックス

以上、cssのフレームワークですが、
自分が思ったこととしては、
まだ導入するまでもないのかな〜と思っています。

前者に関しては、便利ですが、やはり細かい所は結局自分で記述しないといけないですし、
レイアウトぐらいであれば手間ではないので、自分で書いてしまえばいいのかなと。
あまりそういうのばかり使うと、自分で考えることを怠けてしまうので、悪影響とさえ思ってしまいます。

後者に関しては、今までcssへの不満が解消されるような気がして、便利でぜひ使ってみたいと思いました。
しかし、ファイルを読み込まないといけないので、ブラウザや環境によってバグがでる可能性があるのではないかと考えてしまいます。
その辺は、詳しく調べてないので、後々調べてみますが、それさえクリアされればぜひ使用したいです。
さすが、海外で当たり前になっているだけありますね。

世の中の技術はどんどん進んで、どんどん便利になっていきますね!
技術は学びたいですが、便利さに甘え、怠けるようになりたくはないですね。

今後このページについては修正していけたらと思います。