Dreamweaver CS6で作るレスポンシブWebデザイン
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 17,119 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
17,119
On Slideshare
9,136
From Embeds
7,983
Number of Embeds
14

Actions

Shares
Downloads
47
Comments
0
Likes
17

Embeds 7,983

http://w3q.jp 6,246
http://www.aiship.jp 1,648
http://feedly.com 54
http://www.feedspot.com 17
https://twitter.com 5
http://feeds.feedburner.com 4
http://tweetedtimes.com 2
http://www.google.co.jp 1
http://reader.aol.com 1
http://digg.com 1
http://feedproxy.google.com 1
http://us-w1.rockmelt.com 1
http://inoreader.com 1
http://www.google.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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