2016年6月時点。おススメのレスポンシブCSSフレームワークを紹介
Photo credit: eva101
※2015/11/8: 最新の情報に更新。
※2015/10/20: 現状に合わせて内容編集と追記。
※2016/6/18: 現状に合わせて内容編集と追記。
重量級から軽量なもの、全てコミコミからミニマムなものと、レスポンシブデザインの実装で利用するCSSフレームワークは多種多様です。コーディングで苦労しないために最初から目的にあったCSSフレームワークを使いましょう。
用途別おすすめレスポンシブCSSフレームワーク
- ブラウザで実装されているモダンCSSの仕組みならCSS flexible box
- Flexboxを使ったレスポンスCSSフレームワークならbulma
- 失敗しない選択肢はBootstrap
- レイアウトだけシンプルにレスポンシブデザイン対応したい方はSkeleton
- シンプルなBootstrapが欲しい方はSemanticUI
おススメできないCSSフレームワーク
マテリアルデザインのCSSフレームワークを探している方へ
マテリアルデザインのフレームワークはレスポンシブデザインのCSSフレームワークと別です。マテリアルデザインのフレームワークをお探しの方はマテリアルデザイン(Material Design)フレームワークのリンク集 - webhack / 猫とウェブ技術が好きをご確認下さい。
他CSSフレームワークの情報
多くのCSSフレームワークを一覧で比較見たい場合はCSS Front-end Frameworks with comparison - By usabli.caが素晴らしく充実しています。ライセンスも明記してあり、更新もされているためブックマークをおススメします。
おススメで紹介したCSSフレームワークの簡単な説明
1.CSS flexible
今はブラウザ本体がレスポンシブを実装したCSSプロパティをサポートしています。そのためCSSフレームワークに依存せずにレスポンシブデザインを実装しやすくなりました。
利用に当たってはブラウザ実装状況を確認して下さい。
- メリット
- ブラウザがサポートしている
- 仕様に沿って実装されていてドキュメントが充実している。CSS Flexible Box Layout Module Level 1
- デメリット
- ブラウザによって細かい挙動が異なる可能性がある
2. bulma
CSS flexibleを使ったレスポンシブCSSフレームワークがbulmaです。使い方はBootstrap等の他フレームワークと同様になっています。
古いブラウザのサポートが必要なくモダンCSSでサイト構築する時はbulmaを使うと直感的にレスポンシブデザインを実現できると思います。
- メリット
- 素のCSS flexible boxを使うよりも直感的なインターフェイスで扱える。
- Javascriptが不要。
- 軽量。
3.Bootstrap
みんな大好きBootstrapは重量級CSSフレームワークの代表格です。レスポンシブデザイン=Bootstrapとイメージするほど広く使われています。重量級で覚えることもたくさんありますが利用者が多く、レスポンシブデザインで起こる問題の多くをBootstrap内で解決できます。jQueryに依存しています。
- メリット
- StackOverFlow等のBootstrapに関する質問やTIPSが多数公開されている
- 日本語情報が多い
- 更新ペースが速い
4.Skeleton
HTMLコーディングにシンプルさを取り戻すSkeletonは軽量級CSSフレームワークの中でもさらに軽量、最軽量といっても良いCSSフレームワークです。レイアウトだけを決めるのに使いたくて他コンポーネントとか別に必要ない用途にぴったりです。
- メリット
- 軽量
- 覚える事が少ない
- 導入が簡単
5.Semantic UI
ウェブUIに一体感を生み出すSemanticUIはBootstrapのようにUIコンポーネントを含んだ重量級CSSフレームワークです。Bootstrapの対抗と言えるかも知れません。デザインもマークアップもゴテゴテせずにシンプルに収められている印象です。
- メリット
- Bootstrapじゃない充実感を得られる
まとめ、今後のCSSフレームワーク
2016年6月時点で、主要ブラウザがCSS Flexboxを実装しており徐々に技術情報も見始めるぐらいに普及してきました。このCSS Flexboxの普及に合わせてCSS Flexboxを使ったレスポンシブCSSフレームワークが登場してきています。
Bootstrapのようにメジャーでメンテナンスが継続しているプロジェクトは心配ありませんが、マイナーなCSSフレームワークのメンテナンスが停滞しているのを多くなりました。CSS Flexboxを使えば必要なくなるCSSフレームワークも多いため、メンテナンスの必要性を感じていないのかも知れません。
2016年春が過ぎて、コンポーネントベースでのウェブUIが脚光を集めつつあります。コンポーネントベースのフレームワークにはレイアウトの機能があります。このレイアウトの実装にレスポンシブCSSフレームワークが組み込まれています。
レスポンシブCSSフレームワークはcorpuscssのようにコンポーネントフレームワークの一部に組み込まれて利用されて行く流れになりそうです。
最後に
疑問や質問のコメントをお待ちしております。また直接質問されたい方はterukazu kosuga (@tkosuga) | Twitter宛にメッセージをもらえればと思います。