Your SlideShare is downloading. ×
Responsive Web Design  make with  CSS Framework
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

Responsive Web Design make with CSS Framework

1,585
views

Published on

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

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


0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

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