SlideShare a Scribd company logo
わたしとCSSフレームワーク
CSSフレームワークとは
 その名の通り、CSSのフレームワーク
 主にグリッドシステムとレスポンシブレイアウト
を容易にする
 見出し要素、メニュー要素などよくある要素を予
めデザインファイルとしてパッケージングして提
供しているものもある
 印象としてはTwitter Bootstarpで人気に火がついた
 最近はHTML5対応することで、マークアップが明
確化したことでより柔軟なレイアウトが可能に
グリッドシステムとは
 CSS グリッドシステムとは、レイアウトを均等に
分けて、マス目上に考えるレイアウト
 この段は4等分にしたいとか、ここは3等分にした
いとかが簡単にできる仕組みになっている
 マス目は12マス、24マスの2つが主流。なぜなら
2、3、4等分に対応できるから
グリッドシステムの例
レスポンシブレイアウトとは
 レスポンシブ(=応答できる)レイアウト
 CSS3規格によって、メディアサイズ=画面サイズ
毎のレイアウト定義が可能になったため、1つの
ファイルで複数の画面、デバイスサイズに対応で
きるようになった
 リキッドレイアウトが画面幅に対して同じパーセ
ンテージのレイアウトを提供していたのに対し、
レスポンシブレイアウトは画面幅毎に異なるレイ
アウトを提供できる
 但し、現状CSS3規格への対応はブラウザ毎に様々。
IE9以前だとイマイチな感じになるが、IEはPCブラ
ウザなので、PCレイアウトが適用できればOKとみ
なすのが主流
レスポンシブレイアウトの例
PCでみた場合
レスポンシブレイアウトの例
狭めモニタで見た場
合
主なグリッドシステムとレスポンシブレイアウ
トの
フレームワーク
 960 Grid System : http://960.gs/
 Responsive Grid System : http://responsive.gs/
 34 Responsive Grid System : http://34grid.com/
 Simple Grid : http://thisisdallas.github.io/Simple-
Grid/
 などなど・・・
※概ね英語サイトなのはご愛嬌っていうか国産CSSフレームワークェ……
主流なグリッドシステム①
960 GRID SYSTEM : HTTP://960.GS/
主流なグリッドシステム②
RESPONSIVE GRID SYSTEM : HTTP://RESPONSIVE.GS/
デザイン要素を含むCSSフレームワーク
 グリッドシステムが主流になってから、レイアウ
トだけでなく、デザイン的な要素を含むフレーム
ワークが出始める
 (日本でおそらく)最も有名なのはみんな大好き
Bootstrap : http://getbootstrap.com/
 非デザイナ、非センスなHTML屋がさっくりモック
アップを作るのに非常に助かる(一時期あらゆる
サイトがBootstrapレイアウトになったのは記憶に
新しい)
 グリッドシステムだけでなく、デザイン的な配置
まで考えてくれるCSSフレームワークマジ天使
 難点はカスタム頑張らないと明らかにそれ使って
るよねっていうデザインになること
主観で選ぶ主なCSSフレームワーク
 Bootstrap : http://getbootstrap.com/ (Twitter)
 YUI Library : http://yuilibrary.com/ (Yahoo!)
 HTML KickStart : http://www.99lime.com/
 Foundation : http://foundation.zurb.com/
 難点はIE6対応が必要な場合
 IE8以上なら割とちゃんと動く
 IE10やモダンブラウザなら大喜び
 IE爆発しろ
主流なCSSフレームワーク①
BOOTSTRAP : HTTP://GETBOOTSTRAP.COM/
 みんな大好きBootstrap
 大本は英語サイトだが、日本語解説サイトも充実
しているので、一番とっつきやすい
 ただしV3になってIE8以下は見捨てられた(モダン
ブラウザ使えという思し召し)
 jQuery必須なので、スマートフォンなどモバイル環
境にはあまり優しくない
主流なCSSフレームワーク①
BOOTSTRAP : HTTP://GETBOOTSTRAP.COM/
主流なCSSフレームワーク②
YUI LIBRARY : HTTP://YUILIBRARY.COM/
 天下の 米 Yahoo!様提供
 モジュール分割されているので必要な分だけ入れ
ればいいという親切さ
 ニホンゴサイトスクナイツライ
 YUIの子分としてjavascriptを含まない純粋CSSのフ
レームワーク Pure : http://purecss.io/ がリリース
されたので、フルパッケージはYUI、ライトCSS
パッケージはPureみたいな住み分けになる気配
(PureでもYUIモジュールは使える)
 Pure可愛いよPure
主流なCSSフレームワーク②
YUI LIBRARY : HTTP://YUILIBRARY.COM/
主流なCSSフレームワーク② おまけ
PURE : HTTP://PURECSS.IO/
最後に
 CSSフレームワーク楽しいよ楽だよ
 レスポンシブレイアウトを自分で作るのは死ねる
ので、最初のとっつきにくささえ超えれば、同じ
デザインを共有できるのでとても助かるよ
 社内のWEB屋がもっと増えることを祈っています
本文中でURLの出なかった画像元、参考
 http://webdesignrecipes.com/css-grid-system-
layout/
 http://www.coprosystem.co.jp/tipsblog/2012/01/06.h
tml
 http://coliss.com/articles/build-
websites/operation/css/css-framework-in-first-half-
of-2013.html

More Related Content

PDF
情報編集(Web) 130409
PDF
オリエンテーション・Web概論 - 芸大Web演習
PDF
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
PDF
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
PDF
デザイナのためのGit入門
PDF
Webデザインのセオリーを学ぼう
情報編集(Web) 130409
オリエンテーション・Web概論 - 芸大Web演習
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
芸術情報演習デザイン(Web) 第7回:CSSレイアウト
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
デザイナのためのGit入門
Webデザインのセオリーを学ぼう

Similar to わたしとCssフレームワーク v2 (11)

PPTX
CSS Grid Layout の基礎
PDF
Sass + Foundation 5でレスポンシブペライチ制作
PDF
CSSフレームワークの導入
PDF
Dreamweaver CS6で作るレスポンシブWebデザイン
PDF
Responsive Web Design make with CSS Framework
PDF
Web Platform -- Moving Forward!
PPTX
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
PDF
情報編集(Web) 第7回:CSSレイアウト
PDF
新しいCSSの仕様を色々調べてみた
PDF
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
PDF
フレームワークビギナー勉強会
CSS Grid Layout の基礎
Sass + Foundation 5でレスポンシブペライチ制作
CSSフレームワークの導入
Dreamweaver CS6で作るレスポンシブWebデザイン
Responsive Web Design make with CSS Framework
Web Platform -- Moving Forward!
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
情報編集(Web) 第7回:CSSレイアウト
新しいCSSの仕様を色々調べてみた
メディア芸術基礎 Ⅰ 第5回:CSSレイアウト
フレームワークビギナー勉強会
Ad

わたしとCssフレームワーク v2