Download - Dreamweaver CS6で作るレスポンシブWebデザイン
![Page 1: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/1.jpg)
Dreamweaver CS6で作るレスポンシブWebデザイン
2012/05/19ADC MEETUP ROUND 05
Toru Yoshikawa ( @yoshikawa_t )
![Page 2: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/2.jpg)
Who?吉川 徹/Toru Yoshikawa
html5j.org/HTML5とか勉強会スタッフ
Google API Expert ( Chrome API )
Chrome API Developers JP
allWebクリエイター塾/jQuery Mobile担当講師
Twitter: @yoshikawa_t
Blog: http://d.hatena.ne.jp/pikotea/
![Page 3: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/3.jpg)
Agenda
レスポンシブWebデザインとは?
グリッドレイアウトとは?
Dreamweaver CS6の使い方とデモ
まとめ
![Page 4: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/4.jpg)
レスポンシブWebデザインとは?
![Page 5: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/5.jpg)
A List Apart: Responsive Web Design by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design/
![Page 6: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/6.jpg)
レスポンシブWebデザイン
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
![Page 7: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/7.jpg)
レスポンシブWebデザインの特徴
ワンソース、マルチスクリーン
メンテナンスが容易
CSSのみで構築可能(振り分けによる分断とサーバー実装がない)
新しいデバイスのスクリーンサイズにもすぐに対応できる
![Page 8: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/8.jpg)
レスポンシブWebデザインの注意点
設計が難しい
コンテンツをモジュール化する必要がある
必ずしもモバイルに最適なパフォーマンスが出るわけではない
![Page 9: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/9.jpg)
レスポンシブWebデザインのテクニック
Flexible grid-based layout
Flexible images and media
Media Queries
![Page 10: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/10.jpg)
A Book Apart: Responsive Web Design
http://www.abookapart.com/products/responsive-web-design
![Page 11: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/11.jpg)
グリッドレイアウトとは?
![Page 12: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/12.jpg)
Golden Grid System
http://goldengridsystem.com/
![Page 14: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/14.jpg)
Grid Layout
Column
Gutter
![Page 15: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/15.jpg)
Demoサンプルファイル
http://dl.dropbox.com/u/18090951/adcjp5_rwd_sample.zip
![Page 16: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/16.jpg)
まとめ
![Page 17: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/17.jpg)
なぜ、レスポンシブWebデザインなのか?
http://bradfrostweb.com/blog/notes/this-is-the-web/
![Page 18: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/18.jpg)
![Page 19: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/19.jpg)
![Page 20: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/20.jpg)
![Page 21: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/21.jpg)
Thank you!!( @yoshikawa_t )
![Page 22: Dreamweaver CS6で作るレスポンシブWebデザイン](https://reader033.vdocuments.mx/reader033/viewer/2022052310/545af164af795953128b5615/html5/thumbnails/22.jpg)
Resources「可変グリッドレイアウト」機能の使い方 (http://www.adobe.com/jp/devnet/dreamweaver/articles/dwcs6_fluid_grid_layout.html)
HTML5 Boilerplate (http://jp.html5boilerplate.com/)
A List Apart: Responsive Web Design (http://www.alistapart.com/articles/responsive-web-design/)
A Book Apart: Responsive Web Design (http://www.abookapart.com/products/responsive-web-design)
960 Grid System (http://960.gs/)
Golden Grid System (http://goldengridsystem.com/)
Brad Frost Web: this is the web (http://bradfrostweb.com/blog/notes/this-is-the-web/)