Your SlideShare is downloading. ×
0
Dreamweaver CS6で作るレスポンシブWebデザイン                        2012/05/19               ADC MEETUP ROUND 05   Toru Yoshikawa ( @yo...
Who?吉川 徹/Toru Yoshikawa  html5j.org/HTML5とか勉強会スタッフ  Google API Expert ( Chrome API )  Chrome API Developers JP  allWebクリエイ...
AgendaレスポンシブWebデザインとは?グリッドレイアウトとは?Dreamweaver CS6の使い方とデモまとめ
レスポンシブWebデザインとは?
A List Apart:Responsive Web Design by Ethan Marcotte   http://www.alistapart.com/articles/responsive-web-design/
レスポンシブWebデザインhttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
レスポンシブWebデザインの特徴 ワンソース、マルチスクリーン メンテナンスが容易 CSSのみで構築可能(振り分けによる分 断とサーバー実装がない) 新しいデバイスのスクリーンサイズにも すぐに対応できる
レスポンシブWebデザインの注意点 設計が難しい コンテンツをモジュール化する必要 がある 必ずしもモバイルに最適なパフォー マンスが出るわけではない
レスポンシブWebデザインのテクニック Flexible grid-based layout Flexible images and media Media Queries
A Book Apart:        Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design
グリッドレイアウトとは?
Golden Grid System     http://goldengridsystem.com/
960 Grid System     http://960.gs/
Grid LayoutGutter         Column
Demo                    サンプルファイルhttp://dl.dropbox.com/u/18090951/adcjp5_rwd_sample.zip
まとめ
なぜ、レスポンシブWebデザインなのか?   http://bradfrostweb.com/blog/notes/this-is-the-web/
Thank you!! ( @yoshikawa_t )
Resources「可変グリッドレイアウト」機能の使い方 (http://www.adobe.com/jp/devnet/dreamweaver/articles/dwcs6_fluid_grid_layout.html)HTML5 Boile...
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
Upcoming SlideShare
Loading in...5
×

Dreamweaver CS6で作るレスポンシブWebデザイン

17,536

Published on

ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。

Transcript of "Dreamweaver CS6で作るレスポンシブWebデザイン"

  1. 1. Dreamweaver CS6で作るレスポンシブWebデザイン 2012/05/19 ADC MEETUP ROUND 05 Toru Yoshikawa ( @yoshikawa_t )
  2. 2. 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/
  3. 3. AgendaレスポンシブWebデザインとは?グリッドレイアウトとは?Dreamweaver CS6の使い方とデモまとめ
  4. 4. レスポンシブWebデザインとは?
  5. 5. A List Apart:Responsive Web Design by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design/
  6. 6. レスポンシブWebデザインhttp://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  7. 7. レスポンシブWebデザインの特徴 ワンソース、マルチスクリーン メンテナンスが容易 CSSのみで構築可能(振り分けによる分 断とサーバー実装がない) 新しいデバイスのスクリーンサイズにも すぐに対応できる
  8. 8. レスポンシブWebデザインの注意点 設計が難しい コンテンツをモジュール化する必要 がある 必ずしもモバイルに最適なパフォー マンスが出るわけではない
  9. 9. レスポンシブWebデザインのテクニック Flexible grid-based layout Flexible images and media Media Queries
  10. 10. A Book Apart: Responsive Web Designhttp://www.abookapart.com/products/responsive-web-design
  11. 11. グリッドレイアウトとは?
  12. 12. Golden Grid System http://goldengridsystem.com/
  13. 13. 960 Grid System http://960.gs/
  14. 14. Grid LayoutGutter Column
  15. 15. Demo サンプルファイルhttp://dl.dropbox.com/u/18090951/adcjp5_rwd_sample.zip
  16. 16. まとめ
  17. 17. なぜ、レスポンシブWebデザインなのか? http://bradfrostweb.com/blog/notes/this-is-the-web/
  18. 18. Thank you!! ( @yoshikawa_t )
  19. 19. 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/)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×