勝手に選んだCSSフレームワーク選

1. わたしとCSSフレームワーク

2. CSSフレームワークとは
 その名の通り、CSSのフレームワーク
 主にグリッドシステムとレスポンシブレイアウト
を容易にする
 見出し要素、メニュー要素などよくある要素を予
めデザインファイルとしてパッケージングして提
供しているものもある
 印象としてはTwitter Bootstarpで人気に火がついた
 最近はHTML5対応することで、マークアップが明
確化したことでより柔軟なレイアウトが可能に

3. グリッドシステムとは
 CSS グリッドシステムとは、レイアウトを均等に
分けて、マス目上に考えるレイアウト
 この段は4等分にしたいとか、ここは3等分にした
いとかが簡単にできる仕組みになっている
 マス目は12マス、24マスの２つが主流。なぜなら
２、３、４等分に対応できるから

4. グリッドシステムの例

5. レスポンシブレイアウトとは
 レスポンシブ（＝応答できる）レイアウト
 CSS3規格によって、メディアサイズ=画面サイズ
毎のレイアウト定義が可能になったため、１つの
ファイルで複数の画面、デバイスサイズに対応で
きるようになった
 リキッドレイアウトが画面幅に対して同じパーセ
ンテージのレイアウトを提供していたのに対し、
レスポンシブレイアウトは画面幅毎に異なるレイ
アウトを提供できる
 但し、現状CSS3規格への対応はブラウザ毎に様々。
IE9以前だとイマイチな感じになるが、IEはPCブラ
ウザなので、PCレイアウトが適用できればOKとみ
なすのが主流

6. レスポンシブレイアウトの例
PCでみた場合

7. レスポンシブレイアウトの例
狭めモニタで見た場
合

8. 主なグリッドシステムとレスポンシブレイアウ
トの
フレームワーク
 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フレームワークェ……

9. 主流なグリッドシステム①
960 GRID SYSTEM : HTTP://960.GS/

10. 主流なグリッドシステム②
RESPONSIVE GRID SYSTEM : HTTP://RESPONSIVE.GS/

11. デザイン要素を含むCSSフレームワーク
 グリッドシステムが主流になってから、レイアウ
トだけでなく、デザイン的な要素を含むフレーム
ワークが出始める
 （日本でおそらく）最も有名なのはみんな大好き
Bootstrap : http://getbootstrap.com/
 非デザイナ、非センスなHTML屋がさっくりモック
アップを作るのに非常に助かる（一時期あらゆる
サイトがBootstrapレイアウトになったのは記憶に
新しい）
 グリッドシステムだけでなく、デザイン的な配置
まで考えてくれるCSSフレームワークマジ天使
 難点はカスタム頑張らないと明らかにそれ使って
るよねっていうデザインになること

12. 主観で選ぶ主な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爆発しろ

13. 主流なCSSフレームワーク①
BOOTSTRAP : HTTP://GETBOOTSTRAP.COM/
 みんな大好きBootstrap
 大本は英語サイトだが、日本語解説サイトも充実
しているので、一番とっつきやすい
 ただしV3になってIE8以下は見捨てられた（モダン
ブラウザ使えという思し召し）
 jQuery必須なので、スマートフォンなどモバイル環
境にはあまり優しくない

14. 主流なCSSフレームワーク①
BOOTSTRAP : HTTP://GETBOOTSTRAP.COM/

15. 主流なCSSフレームワーク②
YUI LIBRARY : HTTP://YUILIBRARY.COM/
 天下の 米 Yahoo！様提供
 モジュール分割されているので必要な分だけ入れ
ればいいという親切さ
 ニホンゴサイトスクナイツライ
 YUIの子分としてjavascriptを含まない純粋CSSのフ
レームワーク Pure : http://purecss.io/ がリリース
されたので、フルパッケージはYUI、ライトCSS
パッケージはPureみたいな住み分けになる気配
（PureでもYUIモジュールは使える）
 Pure可愛いよPure

16. 主流なCSSフレームワーク②
YUI LIBRARY : HTTP://YUILIBRARY.COM/

17. 主流なCSSフレームワーク② おまけ
PURE : HTTP://PURECSS.IO/

18. 最後に
 CSSフレームワーク楽しいよ楽だよ
 レスポンシブレイアウトを自分で作るのは死ねる
ので、最初のとっつきにくささえ超えれば、同じ
デザインを共有できるのでとても助かるよ
 社内のWEB屋がもっと増えることを祈っています

19. 本文中で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