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

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

使える!2015年時点で最高の無料HTMLフリーテンプレート50+

使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+

2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW

記事を読む

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し、?部分の指摘もしてくれるDirty Markupをご紹

記事を読む

CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライト作成の決定版!これ以上ない使いやすさの「Spritebox」

CSSスプライトを誰でも簡単に、しかも見やすく生成できてしまうツールのご紹介です。 CSSスプライ

記事を読む

オリジナルなアイコンフォントの作り方・使い方

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ

記事を読む

無料でオリジナルなクイズが作れてしまうツール「QuizGenerator」

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

無料でオリジナルなクイズが、簡単に作成できるツールをご紹介します。 作れるクイズは選択式、穴埋め、

記事を読む