responsive web design - css...
TRANSCRIPT
![Page 1: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/1.jpg)
Responsive Web Design
2013. 05. 25 こもりまさあき
CSS Nite LP Disk 27「スマートフォン対応サイト制作(3)」
THEPRACTICE
OF
レスポンシブWebデザイン 実践編
![Page 2: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/2.jpg)
自己紹介
1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『基礎から覚える、深く理解できる。 Webデザインの新しい教科書』『レスポンシブ・ウェブデザイン標準ガイド』など
Twitter: @cipher / @proteanbmInstagram: @cipher
こもりまさあき
![Page 3: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/3.jpg)
今日お話しすること
•レスポンシブWebデザインあるある
•いまどきのレスポンシブ、その実装方法
![Page 4: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/4.jpg)
レスポンシブあるある
The Problems of Responsive Web Design
![Page 5: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/5.jpg)
The Problems
![Page 6: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/6.jpg)
•スマートデバイスの種類が多くて困っている
•表示・非表示を変えたいコンテンツがある
•PCとスマートフォンでコンテンツの表示順を変えたい
•複数サイズの画像を切り替える方法がわからない
•ラクをしたい
![Page 7: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/7.jpg)
レスポンシブWebデザインの悩みを解決しましょう
![Page 8: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/8.jpg)
その前に。ある海外のサイトで実際に使用されている技術
![Page 9: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/9.jpg)
Requirejs
LESS
BowerNode.js
PhantomJS
Web Fonts
Grunt
Responsive Images
Style Guide
JShint
localStorage
Jasmine
Curljs
![Page 10: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/10.jpg)
レスポンシブな実装って、Media Queriesだけじゃない
![Page 11: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/11.jpg)
技術の組み合わせがポイント
![Page 12: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/12.jpg)
いまどきのレスポンシブ、その実装方法
The Practice of Responsive Web Design
![Page 13: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/13.jpg)
スマートデバイスの種類が多くて困っている
![Page 14: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/14.jpg)
ブレイクポイント、増やせば増やすほど複雑化
![Page 15: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/16.jpg)
ブレイクポイントを減らせるデザインを考える
![Page 17: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/17.jpg)
ちなみに、いまどきは「px」ではなく「em」で切り替え
![Page 18: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/18.jpg)
320px = 20em480px = 30em768px = 48em960px = 60em
johannaruiz/propotional-mqshttps://github.com/johannaruiz/propotional-mqs
![Page 19: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/19.jpg)
表示・非表示を変えたいコンテンツがある
![Page 20: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/20.jpg)
demo
![Page 21: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/21.jpg)
“サイトにアクセスするユーザーのことを考えるとき、端末のことだけでなく、ユーザーが何を期待しているかを
考慮することが大切です。
タブレット端末ユーザーにはフルサイズのウェブを表示しましょうhttp://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html
![Page 22: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/22.jpg)
環境を想定して、柔軟にコンテンツをロードする
![Page 23: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/23.jpg)
WordPressなら「wp_is_mobile()」で
![Page 24: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/24.jpg)
<?php if ( !wp_is_mobile() ) :?><div class="sidebar-ad"><img src="<?php echo get_bloginfo( stylesheet_directory ) ?>/images/banner-sideA.png"></div>
<?php endif; ?>※デスクトップブラウザには、バナーコンテンツを表示する
![Page 25: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/25.jpg)
Ajaxを使って、特定条件のみでコンテンツをロードする
![Page 26: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/26.jpg)
filamentgroup/Ajax-Include-Patternhttps://github.com/filamentgroup/Ajax-Include-Pattern/
![Page 27: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/27.jpg)
コンテンツのロード時間も大事な要素
![Page 28: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/28.jpg)
PCとスマートフォンでコンテンツの表示順を変えたい
![Page 29: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/29.jpg)
Content Choreography
Content Choreograpyhttp://trentwalton.com/2011/07/14/content-choreography/
Choreography: バレエやダンスの振り付け
![Page 30: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/30.jpg)
設計時にコンテンツのブロックの振る舞いを決める
![Page 31: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/31.jpg)
demo
![Page 32: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/32.jpg)
Title
Navigation
Paging Navigation
Footer
Aside Contents
Main Contents 1
Main Contents 2
1
2
3
4
5
6
7
![Page 33: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/33.jpg)
Title
Navigation
Paging Navigation
Main Contents 1
Main Contents 2
1
2
3
4
5
Title
Navigation
Paging Navigation
Main Contents 1
Main Contents 2
1
2
3
4
5
![Page 34: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/34.jpg)
情報ブロックの表示順をコントロールするなら
![Page 35: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/35.jpg)
CSS3の「Flexible Box Layout Module」で
![Page 36: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/36.jpg)
@media screen and (max-width: 48em) { #container { display:box; display:-moz-box; display:-webkit-box; box-orient:vertical; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #container .main, #container header, #container aside, #container footer, #container nav, #container .example_ad { box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; }
#container .example_ad { box-ordinal-group: 4; -moz-box-ordinal-group: 4; -webkit-box-ordinal-group: 4; } #container nav { box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; } #container footer { box-ordinal-group: 3; -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; }}
![Page 37: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/37.jpg)
Content Choreography Mixins In LESShttp://www.alwaystwisted.com/post.php?s=2012-05-17-content-choreography-mixins-in-less
Content Choreography Mixinhttp://blog.woop.ie/post/23227066135/content-choreography-mixin
![Page 38: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/38.jpg)
複数サイズの画像を切り替える方法がわからない
![Page 39: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/39.jpg)
demo
![Page 40: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/40.jpg)
W3Cでも、画像配信のことには議論が進んでいる
![Page 41: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/41.jpg)
picture要素、srcset属性
![Page 42: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/42.jpg)
The picture elementhttp://www.w3.org/TR/html-picture-element/
![Page 43: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/43.jpg)
The srcset attributehttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
![Page 44: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/44.jpg)
似たようなカタチで先行実装するPicturefillを使ってみる
![Page 45: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/45.jpg)
scottjehl/picturefillhttps://github.com/scottjehl/picturefill
![Page 46: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/46.jpg)
<div data-picture data-alt="Alt Text"> <div data-src="small.jpg"></div><div data-src="medium.jpg" data-media="(min-width: 400px)"></div><div data-src="large.jpg" data-media="(min-width: 800px)"></div><div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. --><noscript><img src="external/imgs/small.jpg" alt="Alt Text">
</noscript></div>
![Page 47: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/47.jpg)
ラクをしたい
![Page 48: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/48.jpg)
demo
![Page 49: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/49.jpg)
Frameworks や Static Site Generators を有効活用
![Page 50: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/50.jpg)
fitgridhttp://www.fitgrd.com/
![Page 51: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/51.jpg)
Susyhttp://susy.oddbird.net/
![Page 52: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/52.jpg)
Bootstraphttp://twitter.github.io/bootstrap/
![Page 53: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/53.jpg)
Foundation 4http://foundation.zurb.com/
![Page 54: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/54.jpg)
Jekyllhttp://jekyllrb.com/
![Page 55: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/55.jpg)
Servehttp://get-serve.com/
![Page 57: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/57.jpg)
Bootstrapunch w/ Style Guidehttps://github.com/gaspanik
![Page 58: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/58.jpg)
Deciding in The Browser
![Page 59: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/59.jpg)
やってみないとわからない。だから、動くものを先に
![Page 60: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/60.jpg)
デザインカンプは、むしろ作りながらでも
![Page 61: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/61.jpg)
CasperJShttp://casperjs.org/
![Page 62: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/62.jpg)
casperjs screenshot.js http://localhost/
![Page 63: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/63.jpg)
Windows環境の方に朗報
![Page 64: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/64.jpg)
Preproshttp://alphapixels.com/prepros/
![Page 65: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/65.jpg)
プロジェクトに合わせたワークフローを作るべし
![Page 66: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/66.jpg)
demo
![Page 67: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/67.jpg)
本日のまとめ
•できないのではなく、実装方法はいくらでもある
•使える技術を知って、組み合わせながらどんどん使う
•プロジェクトにあったワークフローを作るとカンタン
![Page 68: Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27 「スマートフォン対応サイト制作(3](https://reader036.vdocumenti.com/reader036/viewer/2022081402/5f0b4c677e708231d42fd3be/html5/thumbnails/68.jpg)
本日はありがとうございました