ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。
スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。
CSS Frameworkの数あり過ぎです。
昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが、今のCSS Frameworkはレスポンシブデザインレイアウトで、ある程度のUIのパーツが用意されているのも当たり前になっています。
ということで、色々なCSS Frameworkの中で良さげなのをピックアップしてみました。
Bootstrap
http://getbootstrap.com/
いわずもがな、最近人気のCSS Frameworkです。
ドキュメントもきちんとしてて、検索でヒットする説明のブログやサイトも多いので、はじめやすいのが良いところです。
jQueryMobile
http://jquerymobile.com/
スマホサイトの出始めの頃使われることが多かったFramework。
Bootstrapがスマホやタブレットのウェブサイト向けだとすると最近のjQueryMobileはウェブアプリ向けな気がします。
jQueryMobileも説明しているブログやウェブサイトが多いので、はじめやすいと思います。
HTML Kick start
http://www.99lime.com/elements/
Bootstrap並みに楽にコーディングできます。
個人的にはBootstrapよりこっちのほうがわかりやすいコーディング規則のような気がします。
Foundation
http://foundation.zurb.com/
Node.jsとSsssを知っていると幸せになれるFramework。
マニュアルが雑なのがちょっと困ります。
タブレットアプリ向けのUIが用意されています。
GroundworkCSS2
http://groundworkcss.github.io/
CSSアニメーション等アニメーションが面白いframework。
アイコンが他のFrameworkに比べても豊富です。
これもFoundation同様ドキュメントがわかりにくくて困ります。
Pure
http://purecss.io/
まさかのCSSのみ。
なので、表示までが軽くて、Skin Builderである程度事前にカスタマイズしたCSSをダウンロードできるのも魅力です。
LAYERS CSS
http://eiskis.net/layers/
CSSだけのframwork。Pureに比べてもシンプルなUIなので、導入するときは選びそうです。
Semantic UI
http://semantic-ui.com/
マニュアルもわかりやすく、コーディング規則もわかりやすい。
Bootstrapと比較したコーディング規則を載せているので、Bootstrapからの乗り換えはしやすいと思います。
個人的にはBootstrapよりこっちのほうがわかりやすいコーディング規則のような気がします。
Gumby
http://gumbyframework.com/
SCSSを知っていると幸せになれるFramework。
Topcoat
http://topcoat.io/
Webアプリ用のCSS Framework。
Braketsのインターフェイスはこれで作られているようです。
Webアプリのインターフェイス用だけど、ちょっとパーツ不足なきがします。
まだ開発中だし、しょうがない気もしますけど。
Onsen UI
http://onsenui.io/
Webアプリ向けのCSSフレームワーク。
Node.jsが必要なところあり。 Monacaというアプリ制作のプラットフォームからの派生 PhonGap用でつくるアプリ用のインターフェイスだと思えば、結構よい作りだと思います。
以上。
色々と取り上げましたが、「Bootstrap」「jQueryMobile」がなんだかんだ、ドキュメントが多いので、取り組みやすいですが、色々なCSS Frameworkを知っておくことでやれることの幅も増えると思うので、押さえておきたいと思います。
ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。
