Responsive Web Design make with CSS Framework

大竹孔明

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

Arctedhttp://arcted.jp

Saturday, 25 May 13

http://arcted.jp

http://arcted.jp

GCSShttp://gcss.info

Saturday, 25 May 13

http://gcss.info

http://gcss.info

GCSShttp://gcss.info

Yahoo!ニュース掲載！

Saturday, 25 May 13

http://gcss.info

http://gcss.info

NameCard.jphttp://name-card.jp

Saturday, 25 May 13

http://name-card.jp

http://name-card.jp

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デザインとは

Saturday, 25 May 13

1ソースでマルチデバイス対応！


http://plus.adobe-adc.jp/




http://onair.adobe-adc.jp/




グリッドシステムが大変


960px

60px 20px

カラムの幅+margin ÷ 親の幅 × 100% = カラムの%

カラムのパーセンテージの求め方


1カラム = 60px ÷ 960px × 100% = 6.25%

2カラム = 140px ÷ 960px × 100% = 14.5833%

3カラム = 220px ÷ 960px × 100% = 22.9166%

・・・・・


めんどくさいですよね


CSS Frameworkでサクッといきましょう！


CSS Frameworkで作ってみる

Saturday, 25 May 13

Saturday, 25 May 13

CSS Frameworkってそもそもなに？


こんなボタンとか


ナビゲーションとか


良い感じのスタイルが沢山用意された

フレームワークです。


グリッドシステムも用意されてる！


使ってみましょう


DEMO

demo

Saturday, 25 May 13

すごいですよね。CSS Framework


CSS Preprocesserで効率化

Saturday, 25 May 13

とっても便利な

CSS Framework


でも実際クライアントワークで

使うのは難しい。


Why!?

Saturday, 25 May 13

1. 決まっているclassで

構築しないといけない

2. 制約が多い


決まっているclassで

構築しないといけない


classのガイドラインがある場合は

この時点で無理..


制約が多い


定義されたスタイルに沿った

デザインをしなければならない


それに必要のないclassまで

ドバっと読まれます


一体どうしたらいい？

Saturday, 25 May 13

DEMO

Saturday, 25 May 13

DEMO

Sass

Saturday, 25 May 13

DEMO

Sass僕達の

Saturday, 25 May 13

CSS Framework


CSS Framework+


CSS Preprocessor

CSS Framework+


CSS Preprocessor

CSS Framework+

II


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



for

Saturday, 25 May 13

CSS Preprocessor

CSS Framework+

II



forClient Work

Saturday, 25 May 13

もう一度Foundationのページを見てみましょう


Click!

Saturday, 25 May 13

Saturday, 25 May 13

DEMO

demo

Saturday, 25 May 13

参考にした人


•Design Spice 小川氏による第一回WDS「レスポンシブWebデザインの実践ワークフロー」

•まぼろし社 CCO 松田氏によるマンツーマン社内勉強会

Saturday, 25 May 13

写真


susipaku at PAKUTASOhttp://www.pakutaso.com/

Saturday, 25 May 13

http://www.pakutaso.com/

http://www.pakutaso.com/

まとめ

•ResponsiveのグリッドシステムはCSS Frameworkだとサクッとできる

•CSS Frameworkは CSS Preprocesserと併用すると神


ありがとうございました！

大竹孔明

Saturday, 25 May 13

Responsive Web Design make with CSS Framework

Documents

Transcript of Responsive Web Design make with CSS Framework