手軽に素敵なホームページを作成することができる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

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

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

ライセンス:MIT
初心者でもWeb制作ができる!CSSフレームワーク「Bootstrap」入門編

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

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

2.Foundation

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

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

ライセンス:MIT

3.Uikit

Uikit
https://getuikit.com/

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

ライセンス:MIT

4.Bulma

bulma.jpg
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

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
フラットデザインとは?マテリアルデザインとは何が違う?

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

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

13.HTML KickStart

HTML KickStart

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

ライセンス:MIT

14.Kube

Kube

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

ライセンス:MIT

15.Workless

Workless
http://workless.ikreativ.com/

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

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

ライセンス:MIT

16.SCHEMA

SCHEMA
http://danmalarkey.github.io/schema/index.html

多様なデザインコンポーネントを提供するUIに特化したCSSフレームワークです。
Less製となっています。

ライセンス:MIT

17.Materialize

Materialize
https://materializecss.com/

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

ライセンス:MIT

18.Wirefy

Wirefy
https://getwirefy.com/

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

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

ライセンス:MIT

19.INK

INK
http://ink.sapo.pt/

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

ライセンス:MIT

20.Semantic UI

Semantic UI
https://semantic-ui.com/

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

ライセンス:MIT

21.YAML

YAML
http://www.yaml.de/

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

ライセンス:CC BY 2.0.

22.TACHYONS

TACHYONS
http://tachyons.io/

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

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

ライセンス:MIT

必要な機能が搭載されたCSSフレームワークを選ぼう

レスポンシブに対応したCSSフレームワークをまとめて紹介しました。

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

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

CSSフレームワークの記事をもっと読む

レスポンシブデザインを作るときにオススメ!cssフレームワークまとめ

レスポンシブデザインを作るときにオススメ!cssフレームワークまとめ

Web制作者にとってレスポンシブデザインの技術は必要になっており、レスポインシブの需要も急上昇しています。今回はデザイナーさん必見のレスポンシブデザインを作るときにオススメのcssフレームワークをご紹介します。

ノンデザイナー必見!CSSを使いこなすために知っておきたい情報まとめ

ノンデザイナー必見!CSSを使いこなすために知っておきたい情報まとめ

CSSとはホームページのデザイン部分のプログラムのことで、デザイン性の高いホームページを作成したいのであれば避けて通れない要素です。レイアウトやデザインを細かく調整できるため、覚えておけばちょっとした調整を自分で対応できます。今回は、CSSを利用する際に知っておいて欲しい基本情報と便利なフレームワーク、サンプルをご紹介します。