Responsive Web Design make with CSS Framework

2,300 views

Published on

第4回 Creators Meetup でお話したResponsive Web DesignをFoundationのグリッドシステムを利用してサクッと作り、CSS Preprocesserで効率的に作る方法のスライドです

Responsive Web Design make with CSS Framework

  1. 1. 大竹孔明Responsive Web Design第4回 Creators Meetup :make withCSS FrameworkSaturday, 25 May 13
  2. 2. 大竹 孔明 こうめコーディングを中心にWeb制作をしていますTwitter : @Bamboo_CFacebook : komei.otakephoto by susipaku at PAKUTASOSaturday, 25 May 13
  3. 3. Arctedhttp://arcted.jpSaturday, 25 May 13
  4. 4. GCSShttp://gcss.infoSaturday, 25 May 13
  5. 5. GCSShttp://gcss.infoYahoo!ニュース掲載!Saturday, 25 May 13
  6. 6. NameCard.jphttp://name-card.jpSaturday, 25 May 13
  7. 7. DEMOWeb DesiningSaturday, 25 May 13
  8. 8. DEMOWeb Developer SelectionSaturday, 25 May 13
  9. 9. 本日の内容•レスポンシブWebデザインとは•CSS Frameworkで作ってみる•CSS Preprocessorで効率化第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  10. 10. 本日の内容•レスポンシブWebデザインとは•CSS Frameworkで作ってみる•CSS Preprocessorで効率化第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  11. 11. 本日の内容•レスポンシブWebデザインとは•CSS Frameworkで作ってみる•CSS Preprocessorで効率化第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  12. 12. 本日の内容•レスポンシブWebデザインとは•CSS Frameworkで作ってみる•CSS Preprocessorで効率化第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  13. 13. レスポンシブWebデザインとはSaturday, 25 May 13
  14. 14. 1ソースでマルチデバイス対応!第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  15. 15. http://plus.adobe-adc.jp/第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  16. 16. http://onair.adobe-adc.jp/第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  17. 17. グリッドシステムが大変第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  18. 18. 960px60px 20pxカラムの幅+margin ÷ 親の幅 × 100% = カラムの%カラムのパーセンテージの求め方第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  19. 19. 1カラム = 60px ÷ 960px × 100% = 6.25%2カラム = 140px ÷ 960px × 100% = 14.5833%3カラム = 220px ÷ 960px × 100% = 22.9166%・・・・・第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  20. 20. めんどくさいですよね第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  21. 21. CSS Frameworkでサクッといきましょう!第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  22. 22. CSS Frameworkで作ってみるSaturday, 25 May 13
  23. 23. Saturday, 25 May 13
  24. 24. CSS Frameworkってそもそもなに?第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  25. 25. こんなボタンとか第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  26. 26. ナビゲーションとか第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  27. 27. 良い感じのスタイルが沢山用意されたフレームワークです。第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  28. 28. グリッドシステムも用意されてる!第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  29. 29. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  30. 30. 使ってみましょう第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  31. 31. DEMOdemoSaturday, 25 May 13
  32. 32. すごいですよね。CSS Framework第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  33. 33. CSS Preprocesserで効率化Saturday, 25 May 13
  34. 34. とっても便利なCSS Framework第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  35. 35. でも実際クライアントワークで使うのは難しい。第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  36. 36. Why!?Saturday, 25 May 13
  37. 37. 1. 決まっているclassで構築しないといけない2. 制約が多い第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  38. 38. 決まっているclassで構築しないといけない第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  39. 39. classのガイドラインがある場合はこの時点で無理..第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  40. 40. 制約が多い第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  41. 41. 定義されたスタイルに沿ったデザインをしなければならない第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  42. 42. それに必要のないclassまでドバっと読まれます第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  43. 43. 一体どうしたらいい?Saturday, 25 May 13
  44. 44. DEMOSaturday, 25 May 13
  45. 45. DEMOSassSaturday, 25 May 13
  46. 46. DEMOSass僕達のSaturday, 25 May 13
  47. 47. 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  48. 48. CSS Framework第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  49. 49. CSS Framework+第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  50. 50. CSS PreprocessorCSS Framework+第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  51. 51. CSS PreprocessorCSS Framework+II第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  52. 52. CSS PreprocessorCSS Framework+II第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Hi SpeedResponsive Web DesignSaturday, 25 May 13
  53. 53. CSS PreprocessorCSS Framework+II第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Hi SpeedResponsive Web DesignforSaturday, 25 May 13
  54. 54. CSS PreprocessorCSS Framework+II第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Hi SpeedResponsive Web DesignforClient WorkSaturday, 25 May 13
  55. 55. もう一度Foundationのページを見てみましょう第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  56. 56. Click!Saturday, 25 May 13
  57. 57. Click!Saturday, 25 May 13
  58. 58. Saturday, 25 May 13
  59. 59. DEMOdemoSaturday, 25 May 13
  60. 60. 参考にした人第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」•Design Spice 小川氏による第一回WDS「レスポンシブWebデザインの実践ワークフロー」•まぼろし社 CCO 松田氏によるマンツーマン社内勉強会Saturday, 25 May 13
  61. 61. 写真第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」susipaku at PAKUTASOhttp://www.pakutaso.com/Saturday, 25 May 13
  62. 62. まとめ•ResponsiveのグリッドシステムはCSS Frameworkだとサクッとできる•CSS FrameworkはCSS Preprocesserと併用すると神第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」Saturday, 25 May 13
  63. 63. ありがとうございました!大竹孔明Saturday, 25 May 13

×