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

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

on

  • 16,477 views

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

Statistics

Views

Total Views
16,477
Views on SlideShare
8,689
Embed Views
7,788

Actions

Likes
16
Downloads
45
Comments
0

14 Embeds 7,788

http://w3q.jp 6246
http://www.aiship.jp 1453
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Dreamweaver CS6で作るレスポンシブWebデザイン 2012/05/19 ADC MEETUP ROUND 05 Toru Yoshikawa ( @yoshikawa_t )
  • 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/
  • 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 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/)