レスポンシブ対応のCSSフレームワーク25選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。
アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。
CSSフレームワークといえば有名どころには「Bootstrap」がありますが、この他にも数多くのものが存在します。
もちろん「Bootstrap」も非常に高機能で使い勝手がいいのですが、目的や好みに合わせてより適したものを選ぶことが重要です。
今回は、レスポンシブに対応したCSSフレームワークを一気にご紹介していきます。
フレームワークを選ぶ際の参考にしましょう。
※ライセンスなどは執筆時点(2015年11月30日)での情報となっています。ご利用の際には必ずページ上でライセンスなどをご確認ください。
レスポンシブ対応の便利なCSSフレームワーク25選
1.Bootstrap
http://getbootstrap.com/
フレームワークの代名詞的存在です。
数多くのCSSフレームワークの中でも特に多くのホームページで採用されているため、ご存知の方も多いのではないでしょうか。
開発元はTwitter社で、レスポンシブ対応を契機に急速に普及しました。
解説サイトが多いため、初心者でも導入しやすいフレームワークです。
ライセンス:MIT
2.Pure
http://purecss.io/
Yahoo!が開発したCSSフレームワークです。
シンプルな機能で軽量な設計になっていますので、とにかく高機能重視などこだわりがなければ使いやすくなっています。
ライセンス: Yahoo BSD
3.Foundation
http://foundation.zurb.com/
Bootstrapと並ぶ人気の高いCSSフレームワークです。
充実した機能が魅力的で、他では少し難しいレイアウトも可能という柔軟性の高さを持っています。
機能面を重視したいという場合に重宝するフレームワークです。
ライセンス:MIT
4.Material UI
http://callemall.github.io/material-ui/#/
Google社が昨年発表した"MaterialDesign"のガイドラインをベースにしたCSSフレームワークです。
今注目のMaterialDesignをホームページに実装することができます。
ライセンス:MIT
5.Web Starter Kit
https://developers.google.com/web/tools/starter-kit/
Google社が提供しているCSSフレームワークです。
WebではおなじみのGoogleが開発しているとあって注目度も高く、最近では今話題のMaterialDesignの考え方も反映してあります。
ライセンス: Apache License 2.0
6.SkyBlue CSS
http://stanko.github.io/skyblue/
定番のBootstrapなどと比較して、非常にシンプルでミニマルなCSSフレームワークです。
機能は必要なものだけをしっかりと揃えていますので、使う機能が限られている方や必要最低限でいいという方に特にオススメです。
ライセンス:MIT
7.Uikit
http://getuikit.com/index.html
コンポーネントが豊富で、かつ軽量なCSSフレームワークです。
UI設計を重視しており、モバイルアプリのフレームワークにあるような機能を搭載しています。
ライセンス:MIT
8.BASE
http://getbase.org/
IE7にも対応しているCSSフレームワークです。
基本的なUIエレメントやグリッドが揃っています。
ライセンス:MIT
9.Cascade Framework
http://jslegers.github.io/cascadeframework/index.html
シンプルで汎用性の高いスタイルシートを提供しているCSSフレームワークです。
こちらよりさらに軽いCascade Framework Light 1.1も提供しています。
ライセンス: MIT
10.Cardinal
http://cardinalcss.com/
モバイルファーストな設計のCSSフレームワークです。
機能は基本的なものとなっていて、ユーザー側で必要に応じてカスタマイズするという形で作られています。
ライセンス:MIT
11.KNACSS
http://knacss.com/
シンプルな作りのCSSフレームワークです。
Less、Sass両方に対応しています。
ライセンス: WTFPL
12.Almost Flat UI
http://websymphony.net/almost-flat-ui/
先にご紹介した、Foundationを基本にした構造のCSSフレームワークです。
その名のとおりフラットなデザインが特徴的です。
近年人気のフラットUIに挑戦したい場合には、非常にオススメできるフレームワークとなっています。
ライセンス:MIT
13.HTML KickStart
http://www.99lime.com/elements/
シンプルスタイルで使いやすいCSSフレームワークです。
機能がフルにセットになっているBootstrapあたりと比較するとカバーしている機能は少ないものの、ベースは十分に揃っています。
ライセンス:MIT
14.Kube
http://imperavi.com/kube/
非常に軽量なスタイルのCSSフレームワークです。
見出し、写真、フォーム、ボタンといった最小限の要素だけをまとめています。
ライセンス:MIT
15.Workless
http://workless.ikreativ.com/
一般的にホームページで使うUIエレメントが一式揃ったCSSフレームワークです。
テーブル、フォーム、ボタンなどを揃えています。
基本のホームページを制作する際の時間短縮に有効です。
ライセンス:MIT
16.Layers CSS
http://eiskis.net/layers/
レイアウトにpxを使わず、emや%を使っているCSSフレームワークです。
装飾設定がほとんどなく、非常にシンプルです。
また、レスポンシブレイアウトに特化しています。
ライセンス:MIT
17.SCHEMA
http://danmalarkey.github.io/schema/index.html
多様なデザインコンポーネントを提供するUIに特化したCSSフレームワークです。
Less製となっています。
ライセンス:MIT
18.Gumby
http://gumbyframework.com/
Sass製のCSSフレームワークです。
カスタマイズを前提とした構造となっていますので、柔軟性の高さが魅力的です。
ベースデザインもシンプルで後からカスタマイズしやすくなっています。
ライセンス:MIT
19.Materialize
http://materializecss.com/
Sassで開発された、マテリアルデザインベースのCSSフレームワークです。
Googleが発表して以降大注目されているマテリアルデザインに沿って、モダンかつシンプルにデザインされています。
ライセンス:MIT
20.Wirefy
http://getwirefy.com/
ホームページ制作に関わる基本要素がセットになったCSSフレームワークです。
コンテンツファーストに則っており、基本のタグだけで出来るように設計されています。
サクッと制作したい時やワイヤーフレーム作成にも便利です。
ライセンス:MIT
21.INK
http://ink.sapo.pt/
豊富なコンポーネントが魅力的なSass製のCSSフレームワークです。
シンプルな見た目とは裏腹に、機能面は充実しています。
ライセンス:MIT
22.Semantic UI
http://semantic-ui.com/
多彩なUIコンポーネント、テーマ機能で自由度の高いデザインが可能なフレームワークです。
自然言語に近いHTMLでレスポンシブデザインができるようになっています。
ライセンス:MIT
23.YAML
http://www.yaml.de/
柔軟な開発ができるSaas製のCSSフレームワークです。
アクセシビリティにも考慮した、安定した設計となっています。
ライセンス:CC BY 2.0.
24.TACHYONS
http://tachyons.io/
モバイルファーストでデザインした、軽量なCSSフレームワークです。
様々なデバイスでできる限りのパフォーマンスを発揮できる構築のサポートを目指しています。
モバイル重視の方には、特にオススメのフレームワークです。
ライセンス:MIT
25.Responsive Boilerplate
http://responsiveboilerplate.com/
クロスブラウザにも対応している、軽くてシンプルなCSSフレームワークです。
モバイルを重視した設計となっていますので、軽量で崩れることなく表示できます。
ライセンス:MIT
まとめ
レスポンシブに対応したCSSフレームワークをまとめてご紹介しました。
いかがでしたでしょうか。
それぞれ対応するブラウザや搭載している機能などの違いがありますので、案件によってうまく使い分けるといった使い方でもいいでしょう。
事前に用途を明確にしておくことで、最適なフレームワークが選べるのではないでしょうか。
気になったものがあれば、ぜひ実際に触ってみましょう。
このニュースを読んだあなたにおすすめ
アクセス解析が捗るWordPressオススメのプラグイン15選
【2015年版】商用無料の人気フリーフォント35選
【必須スキル】2015年は入力速度を上げる!見ないで打てる簡単タイピング術