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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

16,831
views

Published 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デザイン」のセッション資料です。


0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,831
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
51
Comments
0
Likes
17
Embeds 0
No embeds

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

×