chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2015/02/27

[HTML/CSS]HTML/CSSフレームワーク40個!【2015年版】

Web制作でコーディング作業の手助けになる、フレームワーク。数あるフレームワークの中から40個探してみました。それぞれライセンスとCSSが何で書かれているかを明記しております。フレームワーク探しの参考になれば幸いです!

HTML/CSSフレームワーク

最近は、HTML/CSSのフレームワークがたくさん出ており制作の手助けになる事が多いです。

そこで、フレームワークをまとめてみました。最近出たものや古いものも混じっております。

※全て記事執筆時段階でのライセンスやCSSの制作方法となっております。使用する場合はサイトで一度ライセンス等のご確認をお願いします。

参考になれば幸いです。

Bootstrap

fw-1

Bootstrap

http://getbootstrap.com/

定番のTwitter製のフレームワークです。

Sass/Less どちらも対応。

ライセンス: MIT

Foundation

fw-2

Foundation

http://foundation.zurb.com/

こちらも定番となったZurb製のフレームワークです。

Sass製。

ライセンス: MIT

Web Starter Kit

fw-3

Web Starter Kit

https://developers.google.com/web/starter-kit/

Google製のフレームワークです。

Sass製。

ライセンス: Apache License 2.0

Pure

fw-4

Pure

http://purecss.io/

Yahoo!製のCSSフレームワークです。

CSSファイルのみ。

ライセンス: BSD

HTML5  BOILERPLATE

fw-5

HTML5  BOILERPLATE

http://html5boilerplate.com/

HTMLフレームワークです。ベースのHTMLとして私は使っています。

ライセンス: MIT

Initializr

fw-6

Initializr

http://www.initializr.com/

上記のHTML5  BOILERPLATEをベースとして、レスポンシブやBootstrapの雛形となる、

テンプレートを作成してくれます。

ライセンス: MIT

UIkit

fw-7

UIkit

http://getuikit.com/index.html

UI周りに重点を置いたCSSフレームワーク。

Less製。

ライセンス: MIT

BASE

fw-8

BASE

http://matthewhartman.github.io/base/

IE7から対応しているCSSフレームワーク。

Sass/Less どちらも対応。

ライセンス:  MIT

Bijou

fw-9

Bijou

http://andhart.github.io/bijou/

12カラムグリッドレイアウトのCSSフレームワーク。

シンプルで軽量。Sass製。

ライセンス: MIT

IceCream

fw-10

IceCream

http://html5-ninja.com/icecream/

12カラムグリッドレイアウトのCSSフレームワーク。忍者かわいいw

Less製。

ライセンス: WTFPL*

*WTFPL ( Do What the F*** You Want to Public License  ) 極めて緩やかなフリーソフトライセンスだそうですw

Cascade Framework

fw-11

Cascade Framework

http://jslegers.github.io/cascadeframework/index.html

シンプルなCSSフレームワーク。

CSSファイルのみ。

こちらの軽量版 Cascade Framework Light 1.1 もあります。(ライセンス: MIT )

ライセンス: MIT

Mistype

fw-12

Mistype

http://zdroid.roon.io/mistype

シンプルなCSSフレームワーク。

CSSファイルのみ。

ライセンス:  MIT

Skel

fw-13

Skel

http://getskel.com/

レスポンシブレイアウトだけのシンプルなCSSフレームワーク。

CSSファイルのみ。

ライセンス: MIT

 KNACSS

fw-14

KNACSS

http://www.knacss.com/

IE6,7,8も部分的にサポートしているレスポンシブCSSフレームワーク。

Sass/Less どちらも対応。

ライセンス: WTFPL

Min

fw-15

Min

http://mincss.com/

IE5.5(!?)からIE8など古いブラウザも部分的にサポートしているCSSフレームワーク。

Sass/Less どちらも対応。

ライセンス: MIT

Cardinal

fw-40

Cardinal

http://cardinalcss.com/

モバイルファーストで構築されたレスポンシブCSSフレームワーク。

Less製。

ライセンス: MIT

HTML KickStart

fw-17

HTML KickStart

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

IE8から対応しているレスポンシブCSSフレームワーク。

CSSファイルのみ。

ライセンス: MIT

 Concise

fw-18

Concise

http://concisecss.com/

レスポンシブCSSフレームワーク。UI周りも色々揃っています。

Sass製。

ライセンス:  MIT

Material UI

fw-19

Material UI

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

Googleが提唱したマテリアルデザインに沿ったCSSフレームワーク。

Less製。

ライセンス: MIT

Almost Flat UI

fw-20

Almost Flat UI

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

FoundationフレームワークをベースとしたフラットデザインのCSSフレームワーク。

Sass製。

ライセンス: MIT

Bootflat

fw-21

Bootflat

http://bootflat.github.io/

BootstrapフレームワークをベースとしたフラットデザインのCSSフレームワーク。

PSDにデザインをまとめたものも配布されているようです。

Sass製。

ライセンス: MIT

Kube

fw-22

Kube

http://imperavi.com/kube/

レスポンシブCSSフレームワーク。

Less製。

ライセンス: MIT

Toast

fw-23

Toast

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

グリッドレイアウトのみに特化したCSSフレームワーク。

Sass製。

ライセンス: MIT

Workless

fw-24

Workless

http://workless.ikreativ.com/

UIに関連する、アイコンや背景パターンなどUIに特化したCSSフレームワーク。

CSSファイルのみ。

ライセンス: MIT

Gumby

fw-25

Gumby

http://gumbyframework.com/

レスポンシブCSSフレームワーク。

Sass製。

ライセンス: MIT

Responsive Grid System

fw-26

Responsive Grid System

http://responsive.gs/

レスポンシブの設定だけがまとめられたCSSフレームワーク。24カラム、16カラム、12カラムそれぞれCSSが分けられております。またhtcファイル/respond.jsを使って古いブラウザにも対応しています。

CSSファイルのみ。

ライセンス: GPL & MIT

Bourbon

fw-27

Bourbon

http://bourbon.io/

Sassで書かれたフォントサイズやCSSアニメーション等がそれぞれMixinライブラリとして公開されています。

Sass製。

ライセンス: MIT

Layers CSS

fw-28

Layers CSS

http://eiskis.net/layers/

レスポンシブレイアウトのみに特化したCSSフレームワーク。

装飾は、ほぼ設定がありません。

こちらはpxを使用せずem単位を使ったレイアウトで考え方が非常に興味深かったです。

CSSファイルのみ。

ライセンス: MIT

SCHEMA

fw-29

SCHEMA

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

Lessで書かれた、UIに特化したレスポンシブCSSフレームワーク。

Less製。

ライセンス: MIT

Materialize

fw-30

Materialize

http://materializecss.com/

Sassで書かれたマテリアルデザイン用のレスポンシブCSSフレームワーク。

Sass製。

ライセンス: MIT

Toolkit

fw-31

Toolkit

http://titon.io/en/toolkit

モバイルファーストで作成されたレスポンシブCSSフレームワーク。

Sass製。

ライセンス: BSD

Wirefy

fw-32 Wirefy

http://getwirefy.com/

IE7から対応しているグリッドシステム型のレスポンシブCSSフレームワーク。

Sass製。

ライセンス: MIT

Semantic UI

fw-33

Semantic UI

http://semantic-ui.com/

国の国旗アイコンなどニッチな部分まで作り込んでいる、UIに特化したレスポンシブCSSフレームワーク。

Less製。

ライセンス: MIT

Kickoff

fw-34

Kickoff

http://tmwagency.github.io/kickoff/

IE8から対応しているレスポンシブCSSフレームワーク。

Sass製。

ライセンス: MIT

Skeleton

fw-35

Skeleton

http://getskeleton.com/

レスポンシブ対応のミニマルなCSSフレームワーク。最新ブラウザのみ対応。

CSSファイルのみ。

ライセンス: MIT

spaceBase

fw-36

spaceBase

http://spacebase.space150.com/

レスポンシブ対応でIE6までサポートしている(!)CSSフレームワーク。SCSSで書かれています。

最近出たばかりでドキュメントは記事公開段階では準備中。

Sass製。

ライセンス: MIT

INK

fw-37

INK

http://ink.sapo.pt/

レスポンシブ対応のCSSフレームワーク。flexboxバージョンはIE10からでグリッドバージョンはIE8から(IE8の場合はmedia queryに対応させるjsを入れる必要があるそうです。)

Sass製。

ライセンス: MIT

YAML

fw-38

YAML

http://www.yaml.de/

IE6から対応している、Sass製のレスポンシブCSSフレームワーク。

Sass製。

ライセンス: CC BY 2.0

TACHYONS

fw-39

TACHYONS

http://tachyons.io/

モバイルファーストで作成されたレスポンシブCSSフレームワーク。

CSSファイルのみ。

ライセンス: MIT

MUI

fw-41

 

MUI

https://www.muicss.com/

Googleのマテリアルデザインのガイドラインを参考に作られたCSS/JSフレームワーク。

Sass製。

ライセンス: MIT

まとめ

いかがでしょうか。あまりにもフレームワークが多く、その数に圧倒されました。。(ものすごい多い。。)

調べきれてないフレームワークがまだまだあります。また、ライセンスが確認出来ないものは除外しました。

それぞれフレームワークによって、CSSのみや、Sass製やLess製、レスポンシブのみに特化したものなど様々なパターンのフレームワークがありました。

案件のタイプによって向き不向きがあると思います。それぞれの特性を活かして上手に工数を減らす事が出来るといいですね。

 

こんなんあるよとか、これは外せない!というのがありましたらTwitterの方で教えて頂けると幸いです!

参考サイト

Bootstrap以外のCSSフレームワークを探してみた – Qiita

( http://qiita.com/seihowlow24/items/05dc8d2b672cebe0e265 )

ラクするWeb制作「フレームワークなにソレ?」な初心者へおすすめの7選

( http://websae.net/framework-20141119/ )

最近のレスポンシブ対応フロントエンドCSSフレームワークまとめ – W3Q

( http://w3q.jp/t/4359 )

スクリプトは最小限!レスポンシブ対応CSSベースの軽量フレームワークのまとめ | コリス

( http://coliss.com/articles/build-websites/operation/css/best-of-css-frameworks-for-web-developers.html )

今後の励みになりますので、良かったらシェアをお願いします。

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