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

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

デザインのインスピレーションに最適!パーツ/テーマごとのWEBデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適!パーツ/テーマごとのデザイン見本帳「calltoidea」

WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid

記事を読む

画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」

CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17(ソースファイル付き)

レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではな

記事を読む

文字をカラフルに!CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用

記事を読む

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

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

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

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自

記事を読む