個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

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

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

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

記事を読む

CSSボタンの参考になる!CSSでつくられたボタンが100以上コレクションされている「CSS Buttons」

CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」

CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ

記事を読む

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」

隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

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

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

記事を読む