responsive web design make with css framework
DESCRIPTION
第4回 Creators Meetup でお話したResponsive Web DesignをFoundationのグリッドシステムを利用してサクッと作り、CSS Preprocesserで効率的に作る方法のスライドですTRANSCRIPT
![Page 1: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/1.jpg)
大竹孔明
Responsive Web Design
第4回 Creators Meetup :
make with
CSS Framework
Saturday, 25 May 13
![Page 2: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/2.jpg)
大竹 孔明 こうめコーディングを中心にWeb制作をしています
Twitter : @Bamboo_CFacebook : komei.otake
photo by susipaku at PAKUTASO
Saturday, 25 May 13
![Page 7: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/7.jpg)
DEMO
Web Desining
Saturday, 25 May 13
![Page 8: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/8.jpg)
DEMO
Web Developer Selection
Saturday, 25 May 13
![Page 9: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/9.jpg)
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 10: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/10.jpg)
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 11: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/11.jpg)
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 12: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/12.jpg)
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 13: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/13.jpg)
レスポンシブWebデザインとは
Saturday, 25 May 13
![Page 14: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/14.jpg)
1ソースでマルチデバイス対応!
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 15: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/15.jpg)
http://plus.adobe-adc.jp/
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 16: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/16.jpg)
http://onair.adobe-adc.jp/
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 17: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/17.jpg)
グリッドシステムが大変
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 18: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/18.jpg)
960px
60px 20px
カラムの幅+margin ÷ 親の幅 × 100% = カラムの%
カラムのパーセンテージの求め方
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 19: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/19.jpg)
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
![Page 20: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/20.jpg)
めんどくさいですよね
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 21: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/21.jpg)
CSS Frameworkでサクッといきましょう!
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 22: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/22.jpg)
CSS Frameworkで作ってみる
Saturday, 25 May 13
![Page 23: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/23.jpg)
Saturday, 25 May 13
![Page 24: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/24.jpg)
CSS Frameworkってそもそもなに?
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 25: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/25.jpg)
こんなボタンとか
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 26: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/26.jpg)
ナビゲーションとか
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 27: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/27.jpg)
良い感じのスタイルが沢山用意された
フレームワークです。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 28: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/28.jpg)
グリッドシステムも用意されてる!
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 29: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/29.jpg)
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 30: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/30.jpg)
使ってみましょう
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 31: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/31.jpg)
DEMO
demo
Saturday, 25 May 13
![Page 32: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/32.jpg)
すごいですよね。CSS Framework
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 33: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/33.jpg)
CSS Preprocesserで効率化
Saturday, 25 May 13
![Page 34: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/34.jpg)
とっても便利な
CSS Framework
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 35: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/35.jpg)
でも実際クライアントワークで
使うのは難しい。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 36: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/36.jpg)
Why!?
Saturday, 25 May 13
![Page 37: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/37.jpg)
1. 決まっているclassで
構築しないといけない
2. 制約が多い
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 38: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/38.jpg)
決まっているclassで
構築しないといけない
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 39: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/39.jpg)
classのガイドラインがある場合は
この時点で無理..
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 40: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/40.jpg)
制約が多い
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 41: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/41.jpg)
定義されたスタイルに沿った
デザインをしなければならない
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 42: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/42.jpg)
それに必要のないclassまで
ドバっと読まれます
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 43: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/43.jpg)
一体どうしたらいい?
Saturday, 25 May 13
![Page 44: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/44.jpg)
DEMO
Saturday, 25 May 13
![Page 45: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/45.jpg)
DEMO
Sass
Saturday, 25 May 13
![Page 46: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/46.jpg)
DEMO
Sass僕達の
Saturday, 25 May 13
![Page 47: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/47.jpg)
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 48: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/48.jpg)
CSS Framework
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 49: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/49.jpg)
CSS Framework+
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 50: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/50.jpg)
CSS Preprocessor
CSS Framework+
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 51: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/51.jpg)
CSS Preprocessor
CSS Framework+
II
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 52: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/52.jpg)
CSS Preprocessor
CSS Framework+
II
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
Hi Speed Responsive Web Design
Saturday, 25 May 13
![Page 53: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/53.jpg)
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
![Page 54: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/54.jpg)
CSS Preprocessor
CSS Framework+
II
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
Hi Speed Responsive Web Design
forClient Work
Saturday, 25 May 13
![Page 55: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/55.jpg)
もう一度Foundationのページを見てみましょう
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 56: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/56.jpg)
Click!
Saturday, 25 May 13
![Page 57: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/57.jpg)
Click!
Saturday, 25 May 13
![Page 58: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/58.jpg)
Saturday, 25 May 13
![Page 59: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/59.jpg)
DEMO
demo
Saturday, 25 May 13
![Page 60: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/60.jpg)
参考にした人
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
•Design Spice 小川氏による第一回WDS「レスポンシブWebデザインの実践ワークフロー」
•まぼろし社 CCO 松田氏によるマンツーマン社内勉強会
Saturday, 25 May 13
![Page 61: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/61.jpg)
写真
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
susipaku at PAKUTASOhttp://www.pakutaso.com/
Saturday, 25 May 13
![Page 62: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/62.jpg)
まとめ
•ResponsiveのグリッドシステムはCSS Frameworkだとサクッとできる
•CSS Frameworkは CSS Preprocesserと併用すると神
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
![Page 63: Responsive Web Design make with CSS Framework](https://reader033.vdocuments.mx/reader033/viewer/2022052900/555c2487d8b42a0b418b4bd0/html5/thumbnails/63.jpg)
ありがとうございました!
大竹孔明
Saturday, 25 May 13