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

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

  • 0
  • 1
  • 13
  • 0
スクリーンショット 2013-10-08 2.48.33

レスポンシブ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
  • 1
  • 13
  • 0

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

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

CSS-Filters-Demo00

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

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

記事を読む

ファイルのウイルス感染を無料でチェックできるオンラインセキュリティー

ファイルのウイルス・マルウエアを無料でスキャンできるオンラインサービス9

ファイルのウイルスやマルウエアを無料でスキャンできるオンラインサービスセキュリティーサービスをご紹介

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

iconfont

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

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

記事を読む

asj52-free-joomla-template

Joomla!の無料テンプレート123 レスポンシブWEBデザイン対応もあり

Joomla!(ジュームラ)は高機能で使いやすいと評判のCMSです。 ドメイン、サーバー込みで無料

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく

記事を読む

Radioactive-Buttons

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

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

記事を読む

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

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

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

記事を読む

4.free-flat-ui-kit

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

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

記事を読む

CSSだけで作られた決済代行・クレジット決済サービスアイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコン95種「PaymentFont」WEBフォントしても使える!

CSSだけで作られた決済代行・クレジット決済サービスの無料アイコンセットをご紹介します。 ピュアC

記事を読む