Your SlideShare is downloading. ×
0
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
わたしとCssフレームワーク v2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

744

Published on

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

勝手に選んだ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
744
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. わたしとCSSフレームワーク
  • 2. CSSフレームワークとは  その名の通り、CSSのフレームワーク  主にグリッドシステムとレスポンシブレイアウト を容易にする  見出し要素、メニュー要素などよくある要素を予 めデザインファイルとしてパッケージングして提 供しているものもある  印象としてはTwitter Bootstarpで人気に火がついた  最近はHTML5対応することで、マークアップが明 確化したことでより柔軟なレイアウトが可能に
  • 3. グリッドシステムとは  CSS グリッドシステムとは、レイアウトを均等に 分けて、マス目上に考えるレイアウト  この段は4等分にしたいとか、ここは3等分にした いとかが簡単にできる仕組みになっている  マス目は12マス、24マスの2つが主流。なぜなら 2、3、4等分に対応できるから
  • 4. グリッドシステムの例
  • 5. レスポンシブレイアウトとは  レスポンシブ(=応答できる)レイアウト  CSS3規格によって、メディアサイズ=画面サイズ 毎のレイアウト定義が可能になったため、1つの ファイルで複数の画面、デバイスサイズに対応で きるようになった  リキッドレイアウトが画面幅に対して同じパーセ ンテージのレイアウトを提供していたのに対し、 レスポンシブレイアウトは画面幅毎に異なるレイ アウトを提供できる  但し、現状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

×