1.
大竹孔明Responsive Web Design第４回 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