Responsive Web Design make with CSS Framework
12 likes2,749 views
第4回 Creators Meetup でお話したResponsive Web DesignをFoundationのグリッドシステムを利用してサクッと作り、CSS Preprocesserで効率的に作る方法のスライドです
Responsive Web Design make with CSS Framework
- 1. 大竹孔明 Responsive Web Design 第４回 Creators Meetup : make with CSS Framework Saturday, 25 May 13
- 2. 大竹 孔明 こうめ コーディングを中心に Web制作をしています Twitter : @Bamboo_C Facebook : komei.otake photo by susipaku at PAKUTASO Saturday, 25 May 13
- 7. DEMO Web Desining Saturday, 25 May 13
- 8. DEMO Web Developer Selection Saturday, 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
- 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. 960px 60px 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. DEMO demo Saturday, 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. DEMO Saturday, 25 May 13
- 45. DEMO Sass 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 Preprocessor CSS Framework + 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
- 51. CSS Preprocessor CSS Framework + II 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
- 52. CSS Preprocessor CSS Framework + II 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Hi Speed Responsive Web Design Saturday, 25 May 13
- 53. CSS Preprocessor CSS Framework + II 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Hi Speed Responsive Web Design for Saturday, 25 May 13
- 54. CSS Preprocessor CSS Framework + II 第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Hi Speed Responsive Web Design for Client Work Saturday, 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. DEMO demo Saturday, 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 PAKUTASO http://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