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

CSS フレームワークとは その名の通り、 CSS のフレームワーク 主にグリッドシステムとレスポンシブレイアウトを

容易にする 見出し要素、メニュー要素などよくある要素を予め

デザインファイルとしてパッケージングして提供しているものもある

印象としては Twitter Bootstarp で人気に火がついた

最近は HTML5 対応することで、マークアップが明確化したことでより柔軟なレイアウトが可能に

グリッドシステムとは CSS グリッドシステムとは、レイアウトを均等に

分けて、マス目上に考えるレイアウト この段は 4 等分にしたいとか、ここは 3 等分にし

たいとかが簡単にできる仕組みになっている マス目は 12 マス、 24 マスの２つが主流。なぜな

ら２、３、４等分に対応できるから

グリッドシステムの例

レスポンシブレイアウトとは レスポンシブ（＝応答できる）レイアウト CSS3 規格によって、メディアサイズ = 画面サイズ

毎のレイアウト定義が可能になったため、１つのファイルで複数の画面、デバイスサイズに対応できるようになった

リキッドレイアウトが画面幅に対して同じパーセンテージのレイアウトを提供していたのに対し、レスポンシブレイアウトは画面幅毎に異なるレイアウトを提供できる

但し、現状 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/ （ Yaho

o ！） 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.html

http://coliss.com/articles/build-websites/operation/css/css-framework-in-first-half-of-2013.html