CSSフレームワーク30選!デザイン含めて一括総まとめ

  • このエントリーをはてなブックマークに追加
  • Pocket
cssフレームワーク30選

CSSフレームワークを使うのは、すでに一般的になっている。

CSSはよくできたWebページデザインシステムだが、大規模なアプリケーションに弱い、車輪の再開発のような部分も多いという弱点がある。

そんな弱点を補ってくれるのがCSSフレームワークだ。フレームワークを使うことで作業時間は大幅に減り、品質も上がる。

しかし、一方で同じCSSフレームワークを使うと、同じようなデザインになりがちという欠点もある。

そこでこのページではCSSのフレームワークを30種類ご紹介する。人気のものからマイナーなものまで幅広く揃えてみた。

CSSフレームワークを選ぶときに参考にしてほしい。

CSSフレームワーク大体の使い方

CSSフレームワークの使い方は大体どれも同じだ。

ステップ1 CSSを読み込む

サイトに行って、CSSとあればJavaScriptをダウンロードする。link rel でサイトに組み込んで準備完了だ。

ステップ2 CSSフレームワークを利用する

手っ取り早くテストがしたければ、ボタン辺りを作成するのがいいだろう。class="○○"という風に、classにそのフレームワーク指定の言葉を入れれば大体動く。

ステップ3 グリッドシステムを利用する

グリッドシステムとは、サイトの区切り方の一種くらいに考えるといい。レスポンシブデザインなどで使いやすいシステムで、ほとんどのCSSフレームワークで採用されている。

それぞれのフレームワークで使い方は違うが、考え方はtableと同じ場合が多い。下記のようなtableだ。

これをclassで書くとグリッドシステムを使うことができる。Bootstrapなどを使う上でよくわからなくなったら、テーブルと同じものだ、くらいに考えておこう。

CSSフレームワーク30選

Bootstrap

bootstrap

http://getbootstrap.com/

もっとも有名なCSSフレームワークこそ、このBootstrapだ。きっとあなたも聞いたことがあるだろう。

BootstrapはTwitter社が開発したCSSフレームワークだ。手軽に導入でき、品質も高いことから世界中で使われている。

レスポンシブ対応は万全で、グリッドシステムを採用している。テーブル、フォーム、アラート、サイズ変更など何から何まで手軽に使え、とても便利だ。次のようなボタンデザインもすぐに作れる。

Bootstrapを利用することを前提としたJavaScriptライブラリなども多数あり、CSSフレームワークのスタンダードになっている。

反面、もっともスタンダードであるため、デザインが他のサービスと似てしまうこともある。そこだけは注意が必要だ。

デザイン

ボタンは次のようなデザインだ。選ばれ続けているだけあって安定感がある。

bootstrap button

アラートは次のようなデザインになっている。bootstrapアラート


Foundation

Foundation

http://foundation.zurb.com/

Bootstrapと並んで人気があるのが、このFoundationだ。

Foundationを使うと簡単にレスポンシブデザインのWebページを作れる。Webページだけではなく、アプリケーションやHTMLメールを作成するにも使える。Foundationもグリッドシステム採用だ。

また、AngularJSとも相性がよく、Angularをよくわからずとも使えるようになっている。カスタマイズの自由度もBootstrapより高い。

デザイン

次のようなナビゲーションを簡単に作ることができる。

Foundation UIコンポーネント

ボタンデザインは次のようになる。

fundation button

Bootstrapのデザインとは差別化されるので、「Bootstrap使いたいけど、同じデザインになるのはちょっと」というときは、まず試したいフレームワークだ。

Bootstrapと同様にかなり重厚なCSSフレームワークになっている。また、日本語の資料が少ないのも難点ではあるが、英語ドキュメントが読めればまず問題なく使えるだろう。


Semantic UI

Semantic UI

http://semantic-ui.com/

名前の通りセマンティックであることに重きを置いているCSSフレームワークだ。セマンティックは、「意味がわかりやすい」くらいの意味だと思って頂いて構わない。

BootstrapなどのCSSフレームワークを使っていると、自分で実現したいデザインをその度に調べる必要がある。しかし、Semantic UIだと”ui stackable center aligned page grid”のように読んですぐにわかる言葉を用いれば、そのまま反映される。これは便利だ。学習コストが低いCSSフレームワークとして人気がある。

デザイン

デザインは次のように様々なUIが簡単に作れる。

semantic ui

ボタンのセンスも抜群だ。

semantic ui button


INK

INK

http://ink.sapo.pt/

INKはレスポンシブなWebページを早く、「必要十分」に作れるCSSフレームワークだ。SASSにも対応している。というより、SASSでできている。

可読性の高いコードが特徴で、クラス名が” horizontal menu”などになる。

GRIDシステムが使え、ナビゲーションメニュー、テーブル、フォーム、Webフォントなど一通りの機能が揃っている。

デザイン

ボタンは次のようなデザインだ。

INK button

アラートもシンプルな使いやすいデザインになっている。

INK alert


Pure

Pure

http://purecss.io/

PureはBootstrapやFoundationに比べると圧倒的に軽いフレームワークだ。

大規模なサービスというよりも、どのサイトにも手軽に入れて欲しい、というのが彼らのスタンスになっている。

グリッド、フォーム、ボタン、テーブル、メニューなど一通り欲しい要素は用意されているので、便利になるようにとりあえず入れておくには最適だ。

デザイン

ボタンデザインは次のようになる。Bootstrapに似ているだろうか。

pure button

フォームは次のようになる。

pure フォーム


Responsive Boilerplate Framework

 Responsive Boilerplate Framework

http://responsiveboilerplate.com/

Responsive Boilerplate Frameworkはわずか3KBしかない。軽量で各種ブラウザにも対応したレスポンシブデザイン用のCSSフレームワークだ。

ボタン等は作れない。ただただレスポンシブデザインのWebサイトを作るために使うフレームワークだ。シンプルな目的でできていて、これはこれで好ましい。使い道もあるだろう。


Scheme

Scheme 

http://danmalarkey.github.io/schema/

Schemeも軽量なCSSフレームワークで、他のフレームワークと同様レスポンシブウェブデザインに対応している。割とシンプルな中身になっており、カスタマイズしやすい。

重厚なCSSフレームワークではないが、UI系の機能は揃っている。

デザイン

ボタンはグループでも作れる。

scheme button group

アラートはデザインセンスがいい。

scheme アラート

LESS製だ。


MUELLER GRID SYSTEM

MUELLER GRID SYSTEM

http://muellergridsystem.com/

SassおよびCompassをベースとしたCSSフレームワークがMUELLER GRID SYSTEMだ。

名前の通りグリッドシステムを作ることに特化している。ここからカスタマイズしていくのがいいだろう。

グリッドシステム用なのでデザインはない。


Almost Flat UI

Almopst Flat UI

http://websymphony.net/almost-flat-ui/

Almost Flat UIはFoundation FrameworkベースのフラットUIテーマだ。デザインパーツがどれもフラットデザインになっていて、今の時代に使いやすい。

デザイン

ボタンは次のようになっている。

almost flat ui button

グループボタンもいいデザインだ。

スクリーンショット 2016-06-09 10.26.32

プログレスバーも用意されている。

almost flat ui bar


Toast

 Toast

http://daneden.github.io/Toast/

Toastもグリッドデザイン専門のCSSフレームワークだ。「シンプルに」をモットーに作られ、その通りシンプルだ。IE8以降に対応させることで、コード量を減らしている。

グリッド専門なので、ボタンなどのデザインはできない。


Skeleton

Skeleton

http://getskeleton.com/

Skeletonは名前の通り最小構成を目指したCSSフレームワークだ。

レスポンシブ対応、グリッド、文字の大きさ調整、フォーム、ボタンなどよく利用する機能がシンプルにまとまっている。

Skeletonを使うと、自分好みのサイトが簡単に作成できる。Bootstrapなどと比べると、使用頻度が低いので、デザインが他のサイトとかぶることもない。

デザイン

ボタンは次のようにシンプルなデザインになっている。

 skelton-design-button

フォームもシンプルで使いやすい。

skelton design form


Kathamo

Kathamo

http://kathamo.github.io/

Kathamoもレスポンシブデザイン用のミニマムCSSフレームワークである。とにかく軽い。14KBしかない。

KathamoのグリッドシステムはBootstrapと同じだ。Bootstrapを使い慣れている方であれば、すぐに使える。

手軽に使うにはうってつけのフレームワークになっている。

デザイン

フォームとボタンはシンプルでいいデザインだ。

Kathamo button

アラートもBootstrapとは少々違う。

Kathamo alert


Bootflat

Bootflat 

http://bootflat.github.io/

BootflatはBootstrapをベースに作られているフラットUIキットだ。

フラットUIを作るのに便利で、PSDなども無料で配ってくれている素敵なオープンソースだ。

モバイルアプリやモバイルサイトを作る際に重宝するようなデザインが揃っている。

デザイン

デザインは揃いに揃っているし、どれもクオリティが高い。

bootflat button

アラートのデザインもいい。

bootflat flat


Materialize

Mterialize 

http://materializecss.com/

マテリアルデザインを取り入れたフレームワークがMaterializeだ。基本的にBootstrapと似ているので、使いやすい方も多いだろう。

アニメーションやトランジションも用意されている。これがとてもかっこいい。サイトテンプレートも用意してくれているのでLPをサクッと作るときにも使える。

デザイン

デザインだけではなく、アニメーションも付くのでぜひ本サイトも見てみてほしい。ボタンデザイン下記だ。

material button

ローディングや進行バーなども完備されている。

ローディング


Material UI

Material UI 

http://www.material-ui.com/#/

Googleのマテリアルデザインを使えるCSSフレームワークだ。また、Reactも使えるようになっている。

シングルページアプリケーションのために作られている。また、利用するにはNode.jsの知識も多少必要だ。Webデザイナーというより、Webエンジニアのためのフレームワークだと思っていい。

デザイン

ボタンは4種類あり、それぞれ簡単に使える。下記は「Raised Button」の例だ。

material-ui

日付選択フォームのUIなども美しい。

material ui

 


Uikit

Uikit

http://getuikit.com/

 基本的な使い方はBootstrapと似ているが、UIkitの方が便利だという人がいるほどのCSSフレームワークだ。

色々と便利な機能が揃っている。3カラムのビッグメニューが作成できたり、ボタンの常時押し機能があったり、YouTubeライクなメニューが簡単に作れたりする。

本サイトではUIkit自体をカスタマイズして出力することもできる。非常にユーザフレンドリーなCSSフレームワークだ。

uikit menu

デザイン

変更もできるがこのようなボタンデザインだ。

uikit button

プログレスバーは次のような形だが、これだけではなく何種類もある。

uikit progress bar


Cardinal

Cardinal

http://cardinalcss.com/

Cardinalはモバイルファーストを理念としたCSSフレームワークだ。16KB程度と軽い。

必要最低限の機能を用意しており、ユーザがカスタマイズすることが前提になっている。LESS製のフレームワークだ。

ボタンやフォームやテーブルの基礎デザインは提供されている。

デザイン

ページネーションはこのような形だ。シンプルで使いやすい。

cardinalcss pagination

ボタンも同様にシンプルなデザインになっている。


Workless

Workless

http://workless.ikreativ.com/

凝ったデザインを作るのでなければ、Worklessは機能的だ。

必要なクラスが一通り揃っていて、デザインも他のフレームワークと違う。サクサクとWebサイトを作りたい方にはオススメだ。

デザイン

ボタンデザインは黒ベースになっている。

workless button

ヘルパーも一通り揃っており、ラベルやアラートなどがすぐにつかえる。

workless alert


Bootmetro

bootmetro

http://www.marcellop.com/bootmetro/

BootmetroはBootstrapをベースにしたフレームワークだ。Windows 8のModern UIのスタイルがイメージされている。

Windows 8自体は不人気だったが、UIは先進的だったことを覚えているだろう。ああいったデザインを作りたければ、Bootmetroを選択しよう。

デザイン

ボタンはシンプルだ。

BootMetro button

サムネイルデザインなども便利である。

BootMetro thumbnail


HTML KickStart

HTML KickStart

http://www.99lime.com/elements/

KickStartはすぐに使えるフレームワークだ。jQueryとサイトからダウンロードできるCSS、JSをコピーすれば導入完了だ。

重厚でもないが、軽くもない一通りの機能は揃っているし、細かい設定もできる。スライドショーやタブもすぐにセッティングできる。

また、コードもデザインを伴って表示ができる。

デザイン

ボタンはサイトよりもアプリケーションに使いやすい。

kickstart

フォームのパーツも揃っている。

kickstart form


AUI

AUI

https://docs.atlassian.com/aui/latest/

AUIはAtlassianが作っているCSSフレームワークだ。Atlassianのデザインアプローチに伴って作成されている。

class名のつけ方は直感的だ。ソースが読みやすい。機能も揃っており、大体なんでもデザインがある。

デザイン

ボタンはシンプルだ。

aui button

他の機能も概ねシンプルなデザインになっている。企業内アプリケーションなどに適したデザインだろう。


Base

 Base

http://getbase.org/

軽く、最小限のベースをうたっているのがBASEだ。とは言え、インストールはNPMを使う。シンプルというフレームワークの中では機能的にもシンプルではない。

テーブルや、引用、フォームなど一通りのデザインは揃っている。また、アニメーション機能も充実している。

デザイン

全体的にデザインデザインしていない。フォームのデザインを見ればイメージが掴めるだろう。

base-form

Baseという名前の通り、上書きを前提としているのがよくわかる。


SkyBlue CSS

SkyBlue CSS

https://stanko.github.io/skyblue/

SkyBlue CSSは肥大化したBootstrapに疑問を感じて、もう少し軽量化を目指したというCSSフレームワークである。汎用性が低い機能は削がれている。

グリッド、テーブル、フォーム、ボタン、アイコンなど基本機能は揃っているが、どれもシンプルだ。

デザイン

ボタンデザインは揃っている。

skyblue css button

フォームも使えそうないいデザインになっている。

skyblue css form


Basscss

Basscss 

http://www.basscss.com/

他のCSSの邪魔をしない、それでいて使いやすくて軽いCSSフレームワークを目指しているのがBasscssだ。

使いやすさという面で色々と工夫が見て取れる。例えば、max-width:100%を設定したい時、class名でfitと入力すればいい。画像にcircleクラスを付けると丸くなる。

.p0でpadding:0 などユーティリティCSSの要素も持っている。

デザイン

デザインは軽く、上書きが前提にされている。

basscss button

classにnot-roundedを付けると角丸を消せる。


Cascade Framework

Cascade Framework

http://www.cascade-framework.com/

Bootstrap系のフレームワークは汎用性をゴールにしている。Cascade Frameworkはユーザにコントロールを任せることをゴールにしている点が異なる。

CSSファイルが分かれていて、どれを使うかは自分次第だ。

また、Webデザイナーにとって最悪のIE対策がすでにされているという点でも優れたCSSフレームワークだ。

デザイン

デザイン要素はシンプルながら味のあるいいデザインだ。ヘルパーの種類も豊富にある。例えば次のようなパネルが簡単に作れる。

cascade framework

サイトにも使えるが、アプリケーション向きだろう。


KNACSS

KNACSS

http://knacss.com/

フランス生まれのKNACSSはシンプルで軽量なCSSフレームワークである。レスポンシヴウェブデザイン対応だ。レイアウト系の要素が多く、デザイン機能はほとんどない。

また、サイトがフランス語なため、解読が厄介なのも問題だ。


Concise CSS

Concise CSS

http://concisecss.com/

 Conise CSSはSASS製のフレームワークだ。軽く使いやすいフレームワークを目指している。

機能をなるべく少なくしている。上書きなどによる工数の増加を抑えるためだ。

また、アドオンとしてスクロールバー、ツールチップ、サークルなどの機能も利用できる。

デザイン

ボタンはシンプルデザインだ。下のように四角だけではなく、角丸のボタンもすぐに作れる。

concisecss button

モーダルも用意されている。

concisecss modal


Furtive

Furtive

http://furtive.co/

Furtiveはモバイルファーストで軽量のCSSフレームワークだ。カスタマイズが容易で、熟練者には使いやすい。

古いブラウザへの対応を丸ごとカットしている。その分、SVGsやFlexible Boxなどの新しい機能に対応している。

デザイン

ボタンもフォームも一般的だ。

furtive button

furtive form

 


Kube CSS Framework

Kube CSS Framework

https://imperavi.com/kube/

Kube CSS Frameworkはデザイン面で非常に優秀なフレームワークだ。軽いがデザイン面では機能が充実している。

例えばボタンだけでも何種類も用意されている。アウトラインのみ、消えかけ、丸ボタン、小さいボタン、白抜きなど様々だ。

Webデザイン

いいデザイン品質を保っているCSSフレームワークだ。

furtive button

furtive notification

 


Layers CSS

Layers CSS

http://eiskis.net/layers/

Layers CSSは軽量でシンプルなCSSフレームワークだ。ダウンロードする前にカスタマイズできる辺りの気遣いが嬉しい。

pxでの定義やカラーの定義は一切ない。また、角丸などもなく、borderも設定されていない。

基本機能最小限で揃っているといったフレームワークで、上書き前提のツールだ。

デザイン

フォームデザインは次のようになっている。

eiskis form

 

 

まとめ

CSSのフレームワークをできる限りまとめてみたが、いかがだっただろうか?

CSSフレームワークはBootstrap型の重厚パターンとシンプルパターンに分かれてきている。マイナーなものはだいたいシンプルなものだが、十分に使えるフレームワークばかりだ。

いずれもデザインや機能にそれぞれ特徴を持っている。既存のフーレムーワクのほとんど網羅しているので、ぜひこの中から自身の目的にあったCSSフレームワークを選んでほしい。

  • このエントリーをはてなブックマークに追加
  • Pocket

このページの続きや関連ページは下記から一覧で確認できる。

短期間でエンジニアになる方法

・「まったくの初心者だけどエンジニアになりたい!」

・「プログラマーとして転職をしたい!」

という方はリナックスアカデミーの資料を見てみてください。短期間で未経験からエンジニアになることができるスクールとして15年間選ばれ続けてきた理由やノウハウが載った資料です。

エンジニアの入り口に立つために必要な勉強技術の最新動向本当に使えるIT資格学習に役立つ国からの奨励金などの情報が詰まっています。

無料で2,3日中にお手元にお届けします。


資料を見てみる

SNSでもご購読できます。

コメント

コメントを残す

*