個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)

レスポンシブWEBデザインにますます注目が集まっているようです。
つい最近では、カラーミーショップでもレスポンシブWEBデザインに対応したテンプレートが発売されていました。



またECサイトを制作・運営する勉強会でも、話題はレスポンシブ。
スマホ向けのサイトからの売上が、ここ最近急激に伸びてきていることから、いかにスマホ向けにするかということが課題に。
メンテナンス性を考えると、レスポンシブにしたいという方も多くいらっしゃいました。
レスポンシブというと、難しいように感じますが、レスポンシブWEBデザインに対応したフレームワークを利用すれば、比較的に簡単に導入することが可能です。
個人商店さんなんかで、予算がかけられないという方は、フレームワークの利用を考えるといいかもしれませんね。
そこで今回は、昨年から2013年9月までに発表されたレスポンシブWEBデザイン対応のCSSフレームワークをご紹介します。
ただ、こんなにたくさんあって、どれを利用したらいいのかわからないという場合もあるかと思います。
フレームワークは、人によって好き嫌いがあるので、どれがいいとは一概には言えませんが、検索をかけてみて、多くの人がブログなどで書いてくれているものを選ぶと安心です。
多くの人が利用しているということは、それだけ汎用性・利便性が高いということですので。

Pure

スクリーンショット 2013-10-08 2.44.53
Yahoo!が作った軽量なCSSフレームワーク。
デザイン性にすぐれたグリッド、フォーム、ボタン、テーブル、メニュー等が準備されています。
jsは不要。
Pure

Cascade Framework

スクリーンショット 2013-10-08 2.45.49
IE6以上に対応。
OOCSS(オブジェクト指向CSS)を使っているほか、テーブル、ナビゲーション、WEBフォントアイコンなども揃っています。
Cascade Framework

.FITGRD

スクリーンショット 2013-10-08 2.46.03
軽量フレームワーク。Bootstrapのようなデザインにはしたくないという方むけだそうです。
fitgrid
ダウンロード

PocketGrid

スクリーンショット 2013-10-08 2.46.20
とても丁寧に解説してくれているので、利用するうえで助かります。
ie6以上対応。
PocketGrid – Pure CSS responsive and semantic grid system
ダウンロード

Kraken

スクリーンショット 2013-10-08 2.46.42
OOCSSをベースに軽量フレームワーク。
ボタンやフォーム、機能を拡張させるAdd-onなども備えています。
Kraken
ダウンロード

GroundworkCSS

スクリーンショット 2013-10-08 2.47.05
ナビゲーションやボタン、テーブル、タブ、フォーム、WEBフォントアイコンなど、必要なものはほとんど揃っているフレームワーク。
demo
ダウンロード

Topcoat

スクリーンショット 2013-10-08 2.47.32
Adobe社提供のレスポンシブ対応フレームワーク。
こちらも必要な要素はほぼ揃っています。
Topcoat
Demo
ダウンロード

gridism.

スクリーンショット 2013-10-08 2.47.52
非常にシンプルかつ軽量なフレームワーク。
Gridism • a simple responsive CSS grid by @cobyism
ダウンロード

Furatto

スクリーンショット 2013-10-08 2.48.14
フラットなUIエレメントが豊富に準備されているフレームワーク。
Furatto
ダウンロード

Gumby

スクリーンショット 2013-10-08 2.48.33
デザイン性にもすぐれたUIエレメントがそろっているフレームワーク。
Gumby – A Flexible, Responsive CSS Framework – Powered by Sass
ダウンロード

skelJS

スクリーンショット 2013-10-08 2.48.52
20kbの軽量フレームワーク。
skelJS: A framework for building responsive sites and apps.
ダウンロード

Ink

スクリーンショット 2013-10-08 2.49.13
インターフェイスを素早く構築するために用意されたシンプルなフレームワークで、ナビゲーションやWEBフォントアイコン、テーブル、などのUIエレメントが準備されています。
InK – Interface Kit
ダウンロード

HTML KickStart

スクリーンショット 2013-10-08 2.49.36
こちらも素早くWEBサイトを構築できるように作られたフレームワーク。
フォームやリスト、ボタン、テーブル、WEBフォントアイコンのほか、スライドショーやタブ切り替え用のjsも準備されています。
評判のいいフレームワークです。
HTML KickStart HTML Elements & Documentation
ダウンロード

Markup Framework

スクリーンショット 2013-10-08 2.50.19
シンプルなフレームワークでありながら、必要最低限のUIエレメントなども揃っています。
Markup Framework
ダウンロード

Jeet Framework

スクリーンショット 2013-10-08 2.50.34
フレームワークを利用するとき、フレームワークの仕様に縛られることがありますが、
このJeet Frameworkは、比較的自由に利用できるように作られたフレームワークとのことです。
Jeet 3
ダウンロード

KNACSS

スクリーンショット 2013-10-08 2.50.51
OOCSSで書かれた、シンプルかつ軽いフレームワーク。
KNACSS, a simple and lightweight CSS framework
ダウンロード

Skeleton

スクリーンショット 2013-10-08 2.51.11
シンプルでありながら、UIエレメントも豊富揃ったフレームワーク。
Skeleton
ダウンロード

Golden Grid System

スクリーンショット 2013-10-08 3.27.09
240〜2560pxまでの画面に対応可能なフレームワーク。
Golden Grid System
GGS.html
GGS.css

Bootstrap

スクリーンショット 2013-10-08 2.51.26
もはやていばですね。米ツイッターが開発・提供しているフレームワーク。
だれでも簡単にそこそこのサイトをすぐにつくれるよう、豊富なUIエレメントも揃っています。
Bootstrap
ダウンロード

Foundation

スクリーンショット 2013-10-08 2.51.51
こちらも常識。
高性能かつ、すぐれたデザイン性と、多種多様なUIエレメントで多くのデザイナー・マークアップエンジニアに利用されています。
Foundation: The Most Advanced Responsive Front-end Framework from ZURB
ダウンロード

RWD GRID

スクリーンショット 2013-10-08 3.27.31
960pxグリッドシステムをベースにしたフレームワーク。
ie7対応。
RWD GRID
demo

ONE% CSS GRID

スクリーンショット 2013-10-08 2.53.22
パーセンテージをベースに1280pxと1024pxが用意されています。
ie7,ie8に対応させるには、jsを入れて対応する必要があるようです。
ONE% CSS GRID
demo

IVORY FRAMEWORK

スクリーンショット 2013-10-08 2.53.40
ボタン、フォーム、ツールチップ、テーブル、ページネーション、タブ、アコーディオンなどもサポートした軽量フレームワーク。
IVORY FRAMEWORK
demo

BASE FRAMEWORK

スクリーンショット 2013-10-08 2.54.01
最低限のものしか用意されていないシンプルなフレームワーク。
BASE FRAMEWORK
demo

SIMPLE GRID

スクリーンショット 2013-10-08 2.54.21
シンプルなグリッドシステムで構成された軽量フレームワーク。CSSは1.73kb。
SIMPLE GRID
demo

KUBE CSS FRAMEWORK

スクリーンショット 2013-10-08 2.54.39
プロフェッショナル向けという冠がつけられた軽量フレームワーク。
フォームやメニュー、テーブル、その他、非常に細かいエレメントまでを適応範囲にしています。
KUBE CSS FRAMEWORK
demo

PROPORTIONAL GRIDS

スクリーンショット 2013-10-08 2.54.57
リキッドレイアウトを使ったフレームワーク。
ie7にも対応。
PROPORTIONAL GRIDS
demo

QUANTUM FRAMEWORKK

スクリーンショット 2013-10-08 2.59.36
12もしくは16カラムベースのフレームワーク。
Quantum Framework
ダウンロード

INGRID

スクリーンショット 2013-10-08 2.59.10
軽くて、カスタマイズしやすい構造のフレームワーク。
ie8対応。
demo
INGRID

TOAST

スクリーンショット 2013-10-08 2.59.51
floatを使用しない、960pxベースのフレームワーク。
ie8対応。
demo
TOAST

THE GOLDILOCKS APPROACH

スクリーンショット 2013-10-08 3.00.07
シンプルなフレームワーク。
demo
THE GOLDILOCKS APPROACH

Workless

スクリーンショット 2013-10-08 3.01.04
Twitter BootstrapとHTML5 Bolilerplateの良い所をとったフレームワーク。
ボタン、フォーム、テーブル、アイコン、画像ズーム用プラグインなどのUIエレメントも揃っています。
Workless
ダウンロード

Reuze

スクリーンショット 2013-10-08 3.02.10
超軽量なフレームワーク。
文字ものサイトなどに適しているそうです。
Reuze
ダウンロード

Pods

スクリーンショット 2013-10-08 3.03.09
WordPressのためのフレキシブルフレームワーク。
Pods

CSSHorus

スクリーンショット 2013-10-08 3.04.19
シンプルでありながら、見出しや簡単なボタンのほか、フォームやテーブルも用意されているフレームワーク。
IE7にも対応。
CSSHorus
Demo
ダウンロード

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 13
  • 39

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。

記事を読む

セキュリティー/プライバシーにすぐれたブラウザ6選

IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが

記事を読む

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム

記事を読む

波打つようなクリックエフェクトを実装できる「Waves」

今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む