View
1.621
Download
1
Category
Preview:
DESCRIPTION
第4回 Creators Meetup でお話したResponsive Web DesignをFoundationのグリッドシステムを利用してサクッと作り、CSS Preprocesserで効率的に作る方法のスライドです
Citation preview
大竹孔明
Responsive Web Design
第４回 Creators Meetup :
make with
CSS Framework
Saturday, 25 May 13
大竹 孔明 こうめコーディングを中心にWeb制作をしています
Twitter : @Bamboo_CFacebook : komei.otake
photo by susipaku at PAKUTASO
Saturday, 25 May 13
DEMO
Web Desining
Saturday, 25 May 13
DEMO
Web Developer Selection
Saturday, 25 May 13
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
本日の内容
•レスポンシブWebデザインとは
•CSS Frameworkで作ってみる
•CSS Preprocessorで効率化
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
レスポンシブWebデザインとは
Saturday, 25 May 13
1ソースでマルチデバイス対応！
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
http://plus.adobe-adc.jp/
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
http://onair.adobe-adc.jp/
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
グリッドシステムが大変
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
960px
60px 20px
カラムの幅+margin ÷ 親の幅 × 100% = カラムの%
カラムのパーセンテージの求め方
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
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
めんどくさいですよね
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Frameworkでサクッといきましょう！
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Frameworkで作ってみる
Saturday, 25 May 13
Saturday, 25 May 13
CSS Frameworkってそもそもなに？
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
こんなボタンとか
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
ナビゲーションとか
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
良い感じのスタイルが沢山用意された
フレームワークです。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
グリッドシステムも用意されてる！
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
使ってみましょう
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
DEMO
demo
Saturday, 25 May 13
すごいですよね。CSS Framework
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Preprocesserで効率化
Saturday, 25 May 13
とっても便利な
CSS Framework
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
でも実際クライアントワークで
使うのは難しい。
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
Why!?
Saturday, 25 May 13
1. 決まっているclassで
構築しないといけない
2. 制約が多い
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
決まっているclassで
構築しないといけない
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
classのガイドラインがある場合は
この時点で無理..
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
制約が多い
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
定義されたスタイルに沿った
デザインをしなければならない
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
それに必要のないclassまで
ドバっと読まれます
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
一体どうしたらいい？
Saturday, 25 May 13
DEMO
Saturday, 25 May 13
DEMO
Sass
Saturday, 25 May 13
DEMO
Sass僕達の
Saturday, 25 May 13
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Framework
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Framework+
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Preprocessor
CSS Framework+
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Preprocessor
CSS Framework+
II
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
CSS Preprocessor
CSS Framework+
II
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
Hi Speed Responsive Web Design
Saturday, 25 May 13
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
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
もう一度Foundationのページを見てみましょう
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
Click!
Saturday, 25 May 13
Click!
Saturday, 25 May 13
Saturday, 25 May 13
DEMO
demo
Saturday, 25 May 13
参考にした人
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
•Design Spice 小川氏による第一回WDS「レスポンシブWebデザインの実践ワークフロー」
•まぼろし社 CCO 松田氏によるマンツーマン社内勉強会
Saturday, 25 May 13
写真
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」
susipaku at PAKUTASOhttp://www.pakutaso.com/
Saturday, 25 May 13
まとめ
•ResponsiveのグリッドシステムはCSS Frameworkだとサクッとできる
•CSS Frameworkは CSS Preprocesserと併用すると神
第4回 Creators MeetUp 「Responsive Web Design make with CSS Framework」 Saturday, 25 May 13
ありがとうございました！
大竹孔明
Saturday, 25 May 13
Recommended