Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,415 views

Published on

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

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

わたしと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

×