Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

22,425 views

Published on

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

  • Check the source ⇒ www.HelpWriting.net ⇐ This site is really helped me out gave me relief from headaches. Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Have u ever tried external professional writing services like ⇒ HelpWriting.net ⇐ ? I did and I am more than satisfied.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/369VOVb ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/369VOVb ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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/)

×