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

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

on

  • 16,162 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,162
Views on SlideShare
8,482
Embed Views
7,680

Actions

Likes
16
Downloads
45
Comments
0

14 Embeds 7,680

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