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.
レスポンシブ Webデザイン【基礎編】                     2013年 2月2日            静岡Webフロントエンド勉強会 #1
本日のお題1)マルチデバイス対応のいろいろ2)レスポンシブWebデザ ン             イ (RWD)の実装3)RWDの課題とこれから
W eb       4
W ebW eb/DTP   W eb             W eb   S
Knock! Knock! ∼静岡のWeb制作者のための勉強会∼
1)マルチデバイス対応のいろいろ
Photo by 足成
Photo by 足成
Photo by 足成
Photo by 足成
1)マルチデバイス対応のいろいろマルチデバイス対応が求められる時代
1)マルチデバイス対応のいろいろ マルチデバイス対応の手法1)アプリ開発2)スマホ/タブレット専用ページ3)全デバイ スで共通デザ ン             イ (微調整)4)レスポンシブWebデザ ン             イ
1)マルチデバイス対応のいろいろで、 スポンシブWebデザ ン  レ          イ
1)マルチデバイス対応のいろいろレスポンシブWebデザインは、 PC、タブレット、スマートフォンなど、 あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのス リーンサイ          ク     ...
1)マルチデバイス対応のいろいろレスポンシブWebデザ ン           イ・ワンソースのHTMLで・スクリーンサイズを基準に・CSSでレイアウト切り替える
http://www.kanebo-cosmetics.co.jp/
http://www.microsoft.com/ja-jp/default.aspx
http://www.nhk.or.jp/studiopark/
http://handmade-marche.jp/
http://www.sony.jp/active-speaker/special/SRS-BTV5/
今やGoogle先生がRWDの伝道師…
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
http://googlewebmastercentral-ja.blogspot.jp/2013/01/responsive-design-harnessing-power-of.html
2)レスポンシブWebデザ ンの実装             イ
2) スポンシブWebデザイ                        レ           ンの実装レスポンシブWebデザ ンの3+1要素           イ ・フレキシブルレイ ト  アウ (リキッドレイアウト) ・フレキシブルイ...
2) スポンシブWebデザイ                       レ           ンの実装フレキシブルレイ ト        アウ・要はリキッ   ドレイ ト             アウ・ ィ ドウ幅に追従し ウ ン     ...
2) スポンシブWebデザイ                                  レ           ンの実装フレキシブルレイ ト        アウ<style>                  <style>   #co...
デモ
2) スポンシブWebデザイ                            レ           ンの実装フレキシブルイメージ ・ アウ  レイ トに追従し   て画像のサ ズが変化イ ・前景画像(img要素)   → 幅の最大値を指...
2) スポンシブWebデザイ                                  レ           ンの実装フレキシブルイメージ(前景画像)<style>                   <style>         ...
デモ
2) スポンシブWebデザイ                                レ           ンの実装Media Queries ・適応するCSSの条件分岐 ・RWDではウ ン         ィ ドウ幅を基準に使用 ・複...
2) スポンシブWebデザイ                                    レ           ンの実装Media Queries(外部CSSファイルの切り替え)<link href="styles_pc.css" ...
2) スポンシブWebデザイ                                レ           ンの実装Media Queries(CSS内での切り替え)@media screen and (max-width:480px)...
移動     変形          移動          変形
2) スポンシブWebデザイ       レ           ンの実装デモ
2) スポンシブWebデザイ                              レ           ンの実装viewportブラウザのウ ン     ィ ドウサ ズの う の。                    イ よ なもwi...
2) スポンシブWebデザイ                                     レ           ンの実装viewport<head><title>静岡のWeb系勉強会 Knock! Knock!</title><m...
デモ
3)レスポンシブWebデザ ンの課題             イ
3) スポンシブWebデザイ                                      レ           ンの課題画像のRetina        (HiDPI)対応DevicePixelRatio(viewport上の1...
3) スポンシブWebデザイ                                レ           ンの課題悩ま ブレイ  しい  クポイ ト         ン・バラバラなス リーンサ ズ           ク      イ...
3) スポンシブWebデザイ                               レ           ンの課題表示スピード最適化とdisplay:none・限られた表示スペース・貧弱なマシンパワー(数世代前のPCレベル)・時と場所を...
3) スポンシブWebデザイ                          レ           ンの課題何のためのスマホ対応?・スマホの購入動機 → PCサ トが見たい               イ (お客さまの「赤く て」     ...
3) スポンシブWebデザイ                    レ           ンの課題ユーザーのニー ・ ンテク ト TPOに配慮し  ズ コ   ス ・それに合わせた設計が必要               実装スキ り     ...
3) スポンシブWebデザイ                      レ           ンの課題Google先生がRWDを推奨…PC用のページとモバイ ル用のページを単一のURLとす こ る とができ ため、       る   ユーザ...
3) スポンシブWebデザイ               レ           ンの課題Google先生の都合…ですよね?
まとめ
・マルチデバイス対応のアプローチ アプリ / 専用ページ / そのま / RWD                  ま・実装の基本要素 フレキシ  ブルレイ ト / フ              アウ       レキシブルイメージ Media...
ところで…
JavaScriptをオフにすると…
実際にはJavaScriptでゴリゴリやってます
詳しく 【発展編】 !   は     で
実装に困っ ら     た ご連絡ください!
本日はあ がと ございま    り う     した ご連絡・ご質問など下記までお願いし            ます   E-mail : info@hamnaly.com  Facebook / Twitter : yabecchy
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Upcoming SlideShare
Loading in …5
×

レスポンシブWebデザイン【基礎編】

3,223 views

Published on

「12th Knock!」 第12回Knock! Knock! 勉強会(2013年 2月 7日、B-nest静岡市産学交流センターにて)

レスポンシブWebデザイン【発展編】は下記URLです
http://www.slideshare.net/yabecchy/12th-knock-yaberwd2

Published in: Technology
  • Be the first to comment

レスポンシブWebデザイン【基礎編】

  1. 1. レスポンシブ Webデザイン【基礎編】 2013年 2月2日 静岡Webフロントエンド勉強会 #1
  2. 2. 本日のお題1)マルチデバイス対応のいろいろ2)レスポンシブWebデザ ン イ (RWD)の実装3)RWDの課題とこれから
  3. 3. W eb 4
  4. 4. W ebW eb/DTP W eb W eb S
  5. 5. Knock! Knock! ∼静岡のWeb制作者のための勉強会∼
  6. 6. 1)マルチデバイス対応のいろいろ
  7. 7. Photo by 足成
  8. 8. Photo by 足成
  9. 9. Photo by 足成
  10. 10. Photo by 足成
  11. 11. 1)マルチデバイス対応のいろいろマルチデバイス対応が求められる時代
  12. 12. 1)マルチデバイス対応のいろいろ マルチデバイス対応の手法1)アプリ開発2)スマホ/タブレット専用ページ3)全デバイ スで共通デザ ン イ (微調整)4)レスポンシブWebデザ ン イ
  13. 13. 1)マルチデバイス対応のいろいろで、 スポンシブWebデザ ン レ イ
  14. 14. 1)マルチデバイス対応のいろいろレスポンシブWebデザインは、 PC、タブレット、スマートフォンなど、 あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのス リーンサイ ク ズを基準にCSSでレイ トを調整する とで、 アウ こ デバイスごとに専用サイトを用意することなく、 マルチスクリーンに対応したWebサ トを制作できます。 イ ASCII.jp ( http://ascii.jp/elem/000/000/697/697463/ )
  15. 15. 1)マルチデバイス対応のいろいろレスポンシブWebデザ ン イ・ワンソースのHTMLで・スクリーンサイズを基準に・CSSでレイアウト切り替える
  16. 16. http://www.kanebo-cosmetics.co.jp/
  17. 17. http://www.microsoft.com/ja-jp/default.aspx
  18. 18. http://www.nhk.or.jp/studiopark/
  19. 19. http://handmade-marche.jp/
  20. 20. http://www.sony.jp/active-speaker/special/SRS-BTV5/
  21. 21. 今やGoogle先生がRWDの伝道師…
  22. 22. http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
  23. 23. http://googlewebmastercentral-ja.blogspot.jp/2013/01/responsive-design-harnessing-power-of.html
  24. 24. 2)レスポンシブWebデザ ンの実装 イ
  25. 25. 2) スポンシブWebデザイ レ ンの実装レスポンシブWebデザ ンの3+1要素 イ ・フレキシブルレイ ト アウ (リキッドレイアウト) ・フレキシブルイ メージ ・Media Queries ・viewport
  26. 26. 2) スポンシブWebデザイ レ ンの実装フレキシブルレイ ト アウ・要はリキッ ドレイ ト アウ・ ィ ドウ幅に追従し ウ ン てレイ トが変化 アウ・ アウ レイ トのためのブロック要素 width : px指定(固定値)→ %指定(相対値)
  27. 27. 2) スポンシブWebデザイ レ ンの実装フレキシブルレイ ト アウ<style> <style> #contents { #contents { width: 600px; } width: 66%; }</style> </style><div id= contents > <div id= contents > <!-- コンテンツ --> <!-- コンテンツ --></div> </div>
  28. 28. デモ
  29. 29. 2) スポンシブWebデザイ レ ンの実装フレキシブルイメージ ・ アウ レイ トに追従し て画像のサ ズが変化イ ・前景画像(img要素) → 幅の最大値を指定 (max-width: 100%;) ・背景画像 → 背景画像のサ ズ指定で要素と合わせ イ る (background-size: 100% auto;)
  30. 30. 2) スポンシブWebデザイ レ ンの実装フレキシブルイメージ(前景画像)<style> <style> img { max-width: 100%;</style> height: auto; } </style><img src= image.jpg <img src= image.jpg > width= 50 height= 50 >
  31. 31. デモ
  32. 32. 2) スポンシブWebデザイ レ ンの実装Media Queries ・適応するCSSの条件分岐 ・RWDではウ ン ィ ドウ幅を基準に使用 ・複数の条件で絞込みも可能 (width : 481px∼768pxなど) ・CSSフ イ ァ ル単位 / CSSフ イ ァ ル内での分岐 ・IE8以下は未対応なので注意
  33. 33. 2) スポンシブWebデザイ レ ンの実装Media Queries(外部CSSファイルの切り替え)<link href="styles_pc.css" rel="stylesheet" media="only screen and (max-width:480px) /> // スクリー ン幅が480px以下の場合のCSSファイ ル<link href="styles_mb.css" rel="stylesheet" media="only screen and (min-width:481px) /> // スクリー ン幅が481px以上の場合のCSSファイ ル
  34. 34. 2) スポンシブWebデザイ レ ンの実装Media Queries(CSS内での切り替え)@media screen and (max-width:480px) { // スクリー ン幅が480px以下の場合のCSS #contents { width: 100%; }}@media screen and (min-width:481px) { // スクリー ン幅が481px以上の場合のCSS #contents { width: 600px; }}
  35. 35. 移動 変形 移動 変形
  36. 36. 2) スポンシブWebデザイ レ ンの実装デモ
  37. 37. 2) スポンシブWebデザイ レ ンの実装viewportブラウザのウ ン ィ ドウサ ズの う の。 イ よ なもwidth,initial-scaleなどの値を設定可能。 width=600 → ウ ン ィ ドウサ ズを600pxとみなす イ width=device-width → 端末がも つ固有の値 例) iPhone → 320px / 320px 例) GALAXY S II → 360px / 640px initial-scale=1 → 初期の拡大率を1倍に指定 etc...
  38. 38. 2) スポンシブWebデザイ レ ンの実装viewport<head><title>静岡のWeb系勉強会 Knock! Knock!</title><meta name="viewport" content="width=device-width,initial-scale=1"></head>
  39. 39. デモ
  40. 40. 3)レスポンシブWebデザ ンの課題 イ
  41. 41. 3) スポンシブWebデザイ レ ンの課題画像のRetina (HiDPI)対応DevicePixelRatio(viewport上の1pxとデバイス上で使用される実px数の比率)・ の比率に適した画像でないと、 こ 画像表示が荒れる・1系、 1.5系、 2系、 3系…・DevicePixelRatioによ る画像の出しわけ → JavaScript / サーバーサ ド / 仕様も策定中… イ ※ HiDPI → High Dot Per Inch。高解像度
  42. 42. 3) スポンシブWebデザイ レ ンの課題悩ま ブレイ しい クポイ ト ン・バラバラなス リーンサ ズ ク イ・DevicePixelRatioも様々・2012年発売 : ス マホ98機種 / タブレット132機種・大型化する スマホ / 小型化するタ ブレット → ブレイ クポイ トの設定が難しい… ン ※ ブレイクポイ ト : Media QueriesでCSSを切り替え ン る分岐点
  43. 43. 3) スポンシブWebデザイ レ ンの課題表示スピード最適化とdisplay:none・限られた表示スペース・貧弱なマシンパワー(数世代前のPCレベル)・時と場所を選ぶ通信環境 (LTEが入ればいいけど…) →リソースは少ないほう がいい display:noneは存在する要素を、表示上見えな するだけ く → モバイ ァースト ルフ 「PC-某コンテンツ=モバイ か 「モバイ ル」 ら ル+付加コンテンツ=PC」へ
  44. 44. 3) スポンシブWebデザイ レ ンの課題何のためのスマホ対応?・スマホの購入動機 → PCサ トが見たい イ (お客さまの「赤く て」 し と同じで、鵜呑みにできないけど…)・デバイ スによ て異なる持ち方 / 操作法 っ・シチュエーシ ンで欲しい情報は変わる ョ ex. 時 タイ ・ ミング、 場所、目的/状況 etc... → デバイ “対応” “最適化” ス と は違う
  45. 45. 3) スポンシブWebデザイ レ ンの課題ユーザーのニー ・ ンテク ト TPOに配慮し ズ コ ス ・それに合わせた設計が必要 実装スキ り ルよ も難しい…
  46. 46. 3) スポンシブWebデザイ レ ンの課題Google先生がRWDを推奨…PC用のページとモバイ ル用のページを単一のURLとす こ る とができ ため、 る ユーザーにと てはシェ っ アやリンクが容易であ Googleのアルゴリ り、 ズムにと ってはコンテンツを適切にイ ンデッ スでき よ にな ます。 ク る う りユーザーエージェントの異なるGooglebotごとにページをクロールする必要がないため、Googleが り効率 よ的にコンテンツを発見す こ る とができます。
  47. 47. 3) スポンシブWebデザイ レ ンの課題Google先生の都合…ですよね?
  48. 48. まとめ
  49. 49. ・マルチデバイス対応のアプローチ アプリ / 専用ページ / そのま / RWD ま・実装の基本要素 フレキシ ブルレイ ト / フ アウ レキシブルイメージ Media Queries / viewport・RWDは万能ではない HiDPI対応 / マシンパワー 通信速度 / コ ク ト ・ ンテ ス
  50. 50. ところで…
  51. 51. JavaScriptをオフにすると…
  52. 52. 実際にはJavaScriptでゴリゴリやってます
  53. 53. 詳しく 【発展編】 ! は で
  54. 54. 実装に困っ ら た ご連絡ください!
  55. 55. 本日はあ がと ございま り う した ご連絡・ご質問など下記までお願いし ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy

×