2014年春、人気のCSSフレームワーク フラットデザイン対応もあります

CSSフレームワークって何?

CSSフレームワークとは汎用性の高いスタイルが定義済みのライブラリの総称で、HTMLの要素にclass名を追加するだけで簡単にサイトデザインを構築できるものを指します。

特に最近、人気のフレームワークの特徴としてレスポンシブデザインに対応していることが挙げられ、サイト構築の際の工数削減にも効果があります。

フラットデザイン対応もタイプも増えてきていますね。

CSSフレームワークの紹介

Pure

Yahoo!が開発しているCSSフレームワーク。class名の頭に.pure-と付いているのでフレームワークのクラスと追加分のクラスの見分けがつきやすい。公式サイトの「Skin Builder」というページでカスタマイズしたコードを入手することも出来ます

URL:http://purecss.io/

Pure

BootStrap

Twitter社が開発しているCSSフレームワーク。class指定によるグリッドシステムやフレキシブルなレイアウトが特徴で、アイコンフォントやUIも豊富に用意されているようです。また、BootStrapを採用しているワードプレステーマも多く発表されています。

URL:http://getbootstrap.com/

BootStrap

Foundation

レスポンシブwebデザインを強く意識しているCSSフレームワーク。classがあらかじめ用意されていますが、Sassを書き換えることによって任意のclass名に変更が出来るように設計されています。

URL:http://foundation.zurb.com/

Foundation

Topcoat

Adobeが開発しているCSSフレームワーク。Webアプリケーションでよく使われるパーツがあらかじめ用意されており、また、複数のテーマも用意されています。このフレームワークの特徴としてパフォーマンスを重視しているという事で、それぞれのパーツのベンチマークの確認も出来るようになっています。

URL:http://topcoat.io/

Topcoat

Boot Metro

Windows8風のUIが特徴のCSSフレームワーク。フラットデザインが特徴です。ファイルの構成を見るとBootStrapのjsファイル(bootstrap.js,bootstrap.min.js)が使用されており、BootStrapと同系列のフレームワークのようです。

URL:http://aozora.github.io/bootmetro/

Boot Metro

GroundworkCSS2

レスポンシブWebデザインを簡単に作成することを目的に作られたHTML&CSS& JavaScriptフレームワーク。ダウンロードファイルの中のGruntやSass,jade等の周辺技術を使うことによって自由度が高まり、表現度が広まるようになっています。

URL:http://groundworkcss.github.io/groundwork/docs/home.html

GroundworkCSS2

LAYERS CSS

レイアウトにpx(ピクセル)単位を使わないCSSフレームワーク。単位にemや%を使うことによって高い完成度のフルードグリッドレイアウトを実現しているフレームワークです。また、フラットデザインも強く意識していて角丸のブラウザのデフォルトスタイルのリセットがかかっています。
URL:http://eiskis.net/layers/

LAYERS CSS

最後に

今回は人気のCSSフレームワークを紹介しましたが、これ以外にも色々なCSSフレームワークが存在しています。

どのCSSフレームワークがサイト構成に合うのか、また実際に使ってみての使いやすさやclassの覚えやすさ等も個人によって違ってくると思います。

使う方にとって使いやすいCSSフレームワークを見つけるための参考になれば幸いです!

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
webデザインのグリッドレイアウト作成に使える無料ツール
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
違うブラウザで同じ表示をさせるためには リセットCSSとノーマライズCSSの特徴
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
表示しながらCSSの編集が出来るFirebugの使い方
ワードプレステーマのCSSに影響なくスタイルシートを変更出来るプラグイン
レスポンシブwebサイトを構築するためのポイント「viewport」とは
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
デザイン全般で使えるweb色見本
これは便利!グラデーションが簡単に作れるCSSジェネレーター
ワードプレステーマを変更せずにCSSを追加・管理する方法

Menu

HOME

 TOP