手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。
アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。

CSSフレームワークといえば有名どころには「Bootstrap」がありますが、この他にも数多くのものが存在します。
もちろん「Bootstrap」も非常に高機能で使い勝手がいいのですが、目的や好みに合わせてより適したものを選ぶことが重要です。

今回は、レスポンシブに対応したCSSフレームワークを一気にご紹介していきます。
フレームワークを選ぶ際の参考にしましょう。

※ライセンスなどは執筆時点(2015年11月30日)での情報となっています。ご利用の際には必ずページ上でライセンスなどをご確認ください。

レスポンシブ対応の便利なCSSフレームワーク25選

1.Bootstrap

Bootstrap
http://getbootstrap.com/
フレームワークの代名詞的存在です。
数多くのCSSフレームワークの中でも特に多くのホームページで採用されているため、ご存知の方も多いのではないでしょうか。
開発元はTwitter社で、レスポンシブ対応を契機に急速に普及しました。

解説サイトが多いため、初心者でも導入しやすいフレームワークです。

ライセンス:MIT

2.Pure

Pure
http://purecss.io/
Yahoo!が開発したCSSフレームワークです。
シンプルな機能で軽量な設計になっていますので、とにかく高機能重視などこだわりがなければ使いやすくなっています。

ライセンス: Yahoo BSD

3.Foundation

Foundation
http://foundation.zurb.com/
Bootstrapと並ぶ人気の高いCSSフレームワークです。
充実した機能が魅力的で、他では少し難しいレイアウトも可能という柔軟性の高さを持っています。

機能面を重視したいという場合に重宝するフレームワークです。

ライセンス:MIT

4.Material UI

Material UI
http://callemall.github.io/material-ui/#/
Google社が昨年発表した"MaterialDesign"のガイドラインをベースにしたCSSフレームワークです。
今注目のMaterialDesignをホームページに実装することができます。

ライセンス:MIT

5.Web Starter Kit

Web Starter Kit
https://developers.google.com/web/tools/starter-kit/
Google社が提供しているCSSフレームワークです。
WebではおなじみのGoogleが開発しているとあって注目度も高く、最近では今話題のMaterialDesignの考え方も反映してあります。

ライセンス: Apache License 2.0

6.SkyBlue CSS

SkyBlue CSS
http://stanko.github.io/skyblue/
定番のBootstrapなどと比較して、非常にシンプルでミニマルなCSSフレームワークです。
機能は必要なものだけをしっかりと揃えていますので、使う機能が限られている方や必要最低限でいいという方に特にオススメです。

ライセンス:MIT

7.Uikit

Uikit
http://getuikit.com/index.html
コンポーネントが豊富で、かつ軽量なCSSフレームワークです。
UI設計を重視しており、モバイルアプリフレームワークにあるような機能を搭載しています。

ライセンス:MIT

8.BASE

BASE
http://getbase.org/
IE7にも対応しているCSSフレームワークです。
基本的なUIエレメントやグリッドが揃っています。

ライセンス:MIT

9.Cascade Framework

Cascade Framework
http://jslegers.github.io/cascadeframework/index.html
シンプルで汎用性の高いスタイルシートを提供しているCSSフレームワークです。
こちらよりさらに軽いCascade Framework Light 1.1も提供しています。

ライセンス: MIT

10.Cardinal

Cardinal
http://cardinalcss.com/
モバイルファーストな設計のCSSフレームワークです。
機能は基本的なものとなっていて、ユーザー側で必要に応じてカスタマイズするという形で作られています。

ライセンス:MIT

11.KNACSS

KNACSS
http://knacss.com/
シンプルな作りのCSSフレームワークです。
Less、Sass両方に対応しています。

ライセンス: WTFPL

12.Almost Flat UI

Almost Flat UI
http://websymphony.net/almost-flat-ui/
先にご紹介した、Foundationを基本にした構造のCSSフレームワークです。
その名のとおりフラットなデザインが特徴的です。

近年人気のフラットUIに挑戦したい場合には、非常にオススメできるフレームワークとなっています。

ライセンス:MIT

13.HTML KickStart

HTML KickStart
http://www.99lime.com/elements/
シンプルスタイルで使いやすいCSSフレームワークです。
機能がフルにセットになっているBootstrapあたりと比較するとカバーしている機能は少ないものの、ベースは十分に揃っています。

ライセンス:MIT

14.Kube

Kube
http://imperavi.com/kube/
非常に軽量なスタイルのCSSフレームワークです。
見出し、写真、フォーム、ボタンといった最小限の要素だけをまとめています。

ライセンス:MIT

15.Workless

Workless
http://workless.ikreativ.com/
一般的にホームページで使うUIエレメントが一式揃ったCSSフレームワークです。
テーブル、フォーム、ボタンなどを揃えています。

基本のホームページを制作する際の時間短縮に有効です。

ライセンス:MIT

16.Layers CSS

Layers CSS
http://eiskis.net/layers/
レイアウトにpxを使わず、emや%を使っているCSSフレームワークです。
装飾設定がほとんどなく、非常にシンプルです。

また、レスポンシブレイアウトに特化しています。

ライセンス:MIT

17.SCHEMA

SCHEMA
http://danmalarkey.github.io/schema/index.html
多様なデザインコンポーネントを提供するUIに特化したCSSフレームワークです。
Less製となっています。

ライセンス:MIT

18.Gumby

Gumby
http://gumbyframework.com/
Sass製のCSSフレームワークです。
カスタマイズを前提とした構造となっていますので、柔軟性の高さが魅力的です。
ベースデザインもシンプルで後からカスタマイズしやすくなっています。

ライセンス:MIT

19.Materialize

Materialize
http://materializecss.com/
Sassで開発された、マテリアルデザインベースのCSSフレームワークです。
Googleが発表して以降大注目されているマテリアルデザインに沿って、モダンかつシンプルにデザインされています。

ライセンス:MIT

20.Wirefy

Wirefy
http://getwirefy.com/
ホームページ制作に関わる基本要素がセットになったCSSフレームワークです。
コンテンツファーストに則っており、基本のタグだけで出来るように設計されています。

サクッと制作したい時やワイヤーフレーム作成にも便利です。

ライセンス:MIT

21.INK

INK
http://ink.sapo.pt/
豊富なコンポーネントが魅力的なSass製のCSSフレームワークです。
シンプルな見た目とは裏腹に、機能面は充実しています。

ライセンス:MIT

22.Semantic UI

Semantic UI
http://semantic-ui.com/
多彩なUIコンポーネント、テーマ機能で自由度の高いデザインが可能なフレームワークです。
自然言語に近いHTMLでレスポンシブデザインができるようになっています。

ライセンス:MIT

23.YAML

YAML
http://www.yaml.de/
柔軟な開発ができるSaas製のCSSフレームワークです。
アクセシビリティにも考慮した、安定した設計となっています。

ライセンス:CC BY 2.0.

24.TACHYONS

TACHYONS
http://tachyons.io/
モバイルファーストでデザインした、軽量なCSSフレームワークです。
様々なデバイスでできる限りのパフォーマンスを発揮できる構築のサポートを目指しています。

モバイル重視の方には、特にオススメのフレームワークです。

ライセンス:MIT

25.Responsive Boilerplate

Responsive Boilerplate
http://responsiveboilerplate.com/
クロスブラウザにも対応している、軽くてシンプルなCSSフレームワークです。
モバイルを重視した設計となっていますので、軽量で崩れることなく表示できます。

ライセンス:MIT

まとめ

レスポンシブに対応したCSSフレームワークをまとめてご紹介しました。
いかがでしたでしょうか。

それぞれ対応するブラウザや搭載している機能などの違いがありますので、案件によってうまく使い分けるといった使い方でもいいでしょう。
事前に用途を明確にしておくことで、最適なフレームワークが選べるのではないでしょうか。

気になったものがあれば、ぜひ実際に触ってみましょう。

このニュースを読んだあなたにおすすめ

アクセス解析が捗るWordPressオススメのプラグイン15選
【2015年版】商用無料の人気フリーフォント35選
【必須スキル】2015年は入力速度を上げる!見ないで打てる簡単タイピング術

このニュースに関連するカリキュラム

LPOに関するカリキュラム

LPOに関するカリキュラム

LPOに関して、カリキュラム形式で学びましょう