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

1,256 views

Published on

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

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,256
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. わたしとCSSフレームワーク
  2. 2. CSSフレームワークとは  その名の通り、CSSのフレームワーク  主にグリッドシステムとレスポンシブレイアウト を容易にする  見出し要素、メニュー要素などよくある要素を予 めデザインファイルとしてパッケージングして提 供しているものもある  印象としてはTwitter Bootstarpで人気に火がついた  最近はHTML5対応することで、マークアップが明 確化したことでより柔軟なレイアウトが可能に
  3. 3. グリッドシステムとは  CSS グリッドシステムとは、レイアウトを均等に 分けて、マス目上に考えるレイアウト  この段は4等分にしたいとか、ここは3等分にした いとかが簡単にできる仕組みになっている  マス目は12マス、24マスの2つが主流。なぜなら 2、3、4等分に対応できるから
  4. 4. グリッドシステムの例
  5. 5. レスポンシブレイアウトとは  レスポンシブ(=応答できる)レイアウト  CSS3規格によって、メディアサイズ=画面サイズ 毎のレイアウト定義が可能になったため、1つの ファイルで複数の画面、デバイスサイズに対応で きるようになった  リキッドレイアウトが画面幅に対して同じパーセ ンテージのレイアウトを提供していたのに対し、 レスポンシブレイアウトは画面幅毎に異なるレイ アウトを提供できる  但し、現状CSS3規格への対応はブラウザ毎に様々。 IE9以前だとイマイチな感じになるが、IEはPCブラ ウザなので、PCレイアウトが適用できればOKとみ なすのが主流
  6. 6. レスポンシブレイアウトの例 PCでみた場合
  7. 7. レスポンシブレイアウトの例 狭めモニタで見た場 合
  8. 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. 9. 主流なグリッドシステム① 960 GRID SYSTEM : HTTP://960.GS/
  10. 10. 主流なグリッドシステム② RESPONSIVE GRID SYSTEM : HTTP://RESPONSIVE.GS/
  11. 11. デザイン要素を含むCSSフレームワーク  グリッドシステムが主流になってから、レイアウ トだけでなく、デザイン的な要素を含むフレーム ワークが出始める  (日本でおそらく)最も有名なのはみんな大好き Bootstrap : http://getbootstrap.com/  非デザイナ、非センスなHTML屋がさっくりモック アップを作るのに非常に助かる(一時期あらゆる サイトがBootstrapレイアウトになったのは記憶に 新しい)  グリッドシステムだけでなく、デザイン的な配置 まで考えてくれるCSSフレームワークマジ天使  難点はカスタム頑張らないと明らかにそれ使って るよねっていうデザインになること
  12. 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. 13. 主流なCSSフレームワーク① BOOTSTRAP : HTTP://GETBOOTSTRAP.COM/  みんな大好きBootstrap  大本は英語サイトだが、日本語解説サイトも充実 しているので、一番とっつきやすい  ただしV3になってIE8以下は見捨てられた(モダン ブラウザ使えという思し召し)  jQuery必須なので、スマートフォンなどモバイル環 境にはあまり優しくない
  14. 14. 主流なCSSフレームワーク① BOOTSTRAP : HTTP://GETBOOTSTRAP.COM/
  15. 15. 主流なCSSフレームワーク② YUI LIBRARY : HTTP://YUILIBRARY.COM/  天下の 米 Yahoo!様提供  モジュール分割されているので必要な分だけ入れ ればいいという親切さ  ニホンゴサイトスクナイツライ  YUIの子分としてjavascriptを含まない純粋CSSのフ レームワーク Pure : http://purecss.io/ がリリース されたので、フルパッケージはYUI、ライトCSS パッケージはPureみたいな住み分けになる気配 (PureでもYUIモジュールは使える)  Pure可愛いよPure
  16. 16. 主流なCSSフレームワーク② YUI LIBRARY : HTTP://YUILIBRARY.COM/
  17. 17. 主流なCSSフレームワーク② おまけ PURE : HTTP://PURECSS.IO/
  18. 18. 最後に  CSSフレームワーク楽しいよ楽だよ  レスポンシブレイアウトを自分で作るのは死ねる ので、最初のとっつきにくささえ超えれば、同じ デザインを共有できるのでとても助かるよ  社内のWEB屋がもっと増えることを祈っています
  19. 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

×