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

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

3. Arcted
http://arcted.jp
Saturday, 25 May 13

4. GCSS
http://gcss.info
Saturday, 25 May 13

5. GCSS
http://gcss.info
Yahoo!ニュース
掲載！
Saturday, 25 May 13

6. NameCard.jp
http://name-card.jp
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

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. 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

46. 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

63. ありがとうございました！
大竹孔明
Saturday, 25 May 13