webhack / ウェブ技術が好き

javascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログ

2016年6月時点。おススメのレスポンシブCSSフレームワークを紹介

CSS ウェブデザイン レスポンシブデザイン

f:id:tkosuga:20151108185128j:plainPhoto credit: eva101

※2015/11/8: 最新の情報に更新。
※2015/10/20: 現状に合わせて内容編集と追記。
※2016/6/18: 現状に合わせて内容編集と追記。

重量級から軽量なもの、全てコミコミからミニマムなものと、レスポンシブデザインの実装で利用するCSSフレームワークは多種多様です。コーディングで苦労しないために最初から目的にあったCSSフレームワークを使いましょう。

用途別おすすめレスポンシブCSSフレームワーク

サイトタイプ別おすすめレスポンシブCSSフレームワーク

  • LP（ランディングページ）を作るならbulmaかSkeleton
  • 数10ページ程度のサイトを作るならBootstrapかSemantic UI
  • 大規模サイトを作るなら、各フレームワークを見てaltCSSを前提とした形で自作するのがおススメ。または基礎部分だけを skeleton か bulma を使うのがおススメ。

今となっては余りおススメではないレスポンシブCSSフレームワーク

  • Bootstrapが重たすぎて好きじゃない方はPure
    • 米Yahoo社による更新が完全に停止してしまいました。

おススメできないCSSフレームワーク

更新されていない、放置されている

更新されなくなって古いまま放置されているCSSフレームワークを使うのはおススメしません。ウェブブラウザは常に更新され続けていますので最新のウェブブラウザに対応している事が保証されているCSSフレームワークを使うのが前提になります。

利用者がない、情報がない

一見、良さげに見えても利用者が居なかったり情報が少ない場合は何かあった場合に自力で解決する事になります。CSSフレームワーク本体にも手を加える必要があるかも知れません。利用者が多く、StackOverFlowを見れば情報があるCSSフレームワークがおススメです。

マテリアルデザインのCSSフレームワークを探している方へ

マテリアルデザインのフレームワークはレスポンシブデザインのCSSフレームワークと別です。マテリアルデザインのフレームワークをお探しの方はマテリアルデザイン(Material Design)フレームワークのリンク集 - webhack / 猫とウェブ技術が好きをご確認下さい。

他CSSフレームワークの情報

多くのCSSフレームワークを一覧で比較見たい場合はCSS Front-end Frameworks with comparison - By usabli.caが素晴らしく充実しています。ライセンスも明記してあり、更新もされているためブックマークをおススメします。

おススメで紹介したCSSフレームワークの簡単な説明

1.CSS flexible

今はブラウザ本体がレスポンシブを実装したCSSプロパティをサポートしています。そのためCSSフレームワークに依存せずにレスポンシブデザインを実装しやすくなりました。

利用に当たってはブラウザ実装状況を確認して下さい。

  • メリット
  • デメリット
    • ブラウザによって細かい挙動が異なる可能性がある

2. bulma

CSS flexibleを使ったレスポンシブCSSフレームワークがbulmaです。使い方はBootstrap等の他フレームワークと同様になっています。

古いブラウザのサポートが必要なくモダンCSSでサイト構築する時はbulmaを使うと直感的にレスポンシブデザインを実現できると思います。

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宛にメッセージをもらえればと思います。