CSSフレームワークのおすすめ22選！レスポンシブ対応のWebサイトを簡単に作成

更新日: 2020年08月24日

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

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

CSSフレームワークとは？その特徴とメリット

CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。

そんなときに便利なのがCSSフレームワークです。CSSフレームワークなら必要なパーツが揃っているためイチから用意したり考えたりする必要はありません。また、CSSフレームワークは一つのセットになっているため、デザインの統一性も問題なし。気に入ったCSSフレームワークを見つければ、誰でも整ったWebサイトの制作が可能となります。

最近ではレスポンシブ対応のCSSフレームワークもたくさんあり、Webサイトをレスポンシブ化も容易になりました。

レスポンシブデザインとは

多くのホームページに導入されているレスポンシブデザインですが、サイトをレスポンシブ化することによってどのようなメリット、またはデメリットが発生するか、Web担当者様は把握できているでしょうか。今回は、レスポンシブデザインのメリットとデメリットを解説します。

CSSフレームワークのデメリット

とても便利なCSSフレームワークですが、デメリットもあります。ひとつ目は、人気のあるCSSフレームワークを利用する場合、他サイトと似通ったものができやすいということ。「Webサイトはとことんオリジナルなデザインにしたい」という場合は、CSSフレームワークの利用が向きません。

また、パーツや機能がセットになっているがゆえ、不要なデータを一緒に組み込んでしまう場合があることもデメリットです。場合によっては、サイトのデータ量を無駄に増やしてしまうことも考えられます。できるだけ、必要な機能のみが搭載されているCSSフレームワークを選ぶようにしましょう。

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

これからレスポンシブ対応のWebサイトを制作する方向けに、レスポンシブ対応のCSSフレームワークが配布されているおすすめサイトを紹介します。

1.Bootstrap

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

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

ライセンス：MIT

初心者でもWeb制作ができる！CSSフレームワーク「Bootstrap」入門編

Bootstrapは、Twitter社が開発したCSSのフレームワークです。本来、CSSを書く場合はスタイルをすべて自分で作る必要がありますが、あらかじめ用意されたテンプレートを使うことで、初心者でも簡単にWebページを制作することが可能なBootstrap。今回は、無料のものから有料のものまで種類が豊富なBootstrapのテンプレートをご紹介していきます。

2.Foundation

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

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

ライセンス：MIT

3.Uikit

Uikit
https://getuikit.com/

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

ライセンス：MIT

4.Bulma

https://bulma.io/

ライセンス：MIT

JavaScriptなしで構成されているCSSフレームワークです。必要なパーツを揃えつつ、カスタマイズ性も高いため、初心者・経験者問わず幅広く活用されています。

5.Pure

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

ライセンス： Yahoo BSD

6.Web Starter Kit

Web Starter Kit
https://developers.google.com/web/tools/starter-kit/

Google社が提供しているCSSフレームワークです。WebではおなじみのGoogleが開発しているとあって注目度も高く、最近では今話題のMaterialDesignの考え方も反映してあります。

ライセンス: Apache License 2.0

7.SkyBlue CSS

SkyBlue CSS
https://muffinman.io/skyblue/

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

ライセンス：MIT

8.BASE

BASE
https://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

http://cardinalcss.com/

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

ライセンス：MIT

11.KNACSS

KNACSS
https://www.knacss.com/

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

ライセンス: WTFPL

12.Almost Flat UI

Almost Flat UI
http://websymphony.net/almost-flat-ui/

先に紹介した、Foundationを基本にした構造のCSSフレームワークです。その名のとおりフラットなデザインが特徴的です。

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

ライセンス：MIT

フラットデザインとは？マテリアルデザインとは何が違う？

私たちが生活の中で触れる様々なものは様々な意図のもとデザインされています。スマートフォンのホーム画面やホームページにおいても時代とともにユーザーへの想いを込めたデザインが進化し続けているのです。何種類もあるデザインの中に、「フラットデザイン」というものがあります。名称を聞く機会はあっても、具体的にどのようなものなのか、他のデザインとの違いなどは意外と知られていません。そこで、今回はフラットデザインについて紹介します。