レスポンシブWebデザイン【基礎編】
•
4 gefällt mir•3,326 views
「12th Knock!」 第12回Knock! Knock! 勉強会（2013年 2月 7日、B-nest静岡市産学交流センターにて） レスポンシブWebデザイン【発展編】は下記URLです http://www.slideshare.net/yabecchy/12th-knock-yaberwd2
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie レスポンシブWebデザイン【基礎編】
Ähnlich wie レスポンシブWebデザイン【基礎編】 (20)
Mehr von Yasuhito Yabe
Mehr von Yasuhito Yabe (15)
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
レスポンシブWebデザイン【基礎編】
- 1. レスポンシブ Webデザイン【基礎編】 2013年 2月2日 静岡Webフロントエンド勉強会 #1
- 2. 本日のお題 １）マルチデバイス対応のいろいろ ２）レスポンシブWebデザ ン イ （RWD）の実装 ３）RWDの課題とこれから
- 4. W eb 4
- 5. W eb W eb/DTP W eb W eb S
- 9. Photo by 足成
- 10. Photo by 足成
- 11. Photo by 足成
- 12. Photo by 足成
- 14. １）マルチデバイス対応のいろいろ マルチデバイス対応の手法 1）アプリ開発 2）スマホ/タブレット専用ページ 3）全デバイ スで共通デザ ン イ （微調整） 4）レスポンシブWebデザ ン イ
- 19. １）マルチデバイス対応のいろいろ で、 スポンシブWebデザ ン レ イ
- 20. １）マルチデバイス対応のいろいろ レスポンシブWebデザインは、 PC、タブレット、ス マートフォンなど、 あらゆるデバイスに最適化した Webサイトを、単一のHTMLで実現する制作手法で す。ブラウザーのス リーンサイ ク ズを基準にCSSでレ イ トを調整する とで、 アウ こ デバイスごとに専用サイト を用意することなく、 マルチスクリーンに対応した Webサ トを制作できます。 イ ASCII.jp ( http://ascii.jp/elem/000/000/697/697463/ )
- 21. １）マルチデバイス対応のいろいろ レスポンシブWebデザ ン イ ・ワンソースのHTMLで ・スクリーンサイズを基準に ・CSSでレイアウト切り替える
- 30. ２）レスポンシブWebデザ ンの実装 イ
- 31. ２） スポンシブWebデザイ レ ンの実装 レスポンシブWebデザ ンの3+1要素 イ ・フレキシブルレイ ト アウ （リキッドレイアウト） ・フレキシブルイ メージ ・Media Queries ・viewport
- 32. ２） スポンシブWebデザイ レ ンの実装 フレキシブルレイ ト アウ ・要はリキッ ドレイ ト アウ ・ ィ ドウ幅に追従し ウ ン てレイ トが変化 アウ ・ アウ レイ トのためのブロック要素 width : px指定（固定値）→ %指定（相対値）
- 33. ２） スポンシブWebデザイ レ ンの実装 フレキシブルレイ ト アウ <style> <style> #contents { #contents { width: 600px; } width: 66%; } </style> </style> <div id= contents > <div id= contents > <!-- コンテンツ --> <!-- コンテンツ --> </div> </div>
- 34. デモ
- 35. ２） スポンシブWebデザイ レ ンの実装 フレキシブルイメージ ・ アウ レイ トに追従し て画像のサ ズが変化イ ・前景画像（img要素） → 幅の最大値を指定 （max-width: 100%;） ・背景画像 → 背景画像のサ ズ指定で要素と合わせ イ る （background-size: 100% auto;）
- 36. ２） スポンシブWebデザイ レ ンの実装 フレキシブルイメージ（前景画像） <style> <style> img { max-width: 100%; </style> height: auto; } </style> <img src= image.jpg <img src= image.jpg > width= 50 height= 50 >
- 37. デモ
- 38. ２） スポンシブWebデザイ レ ンの実装 Media Queries ・適応するCSSの条件分岐 ・RWDではウ ン ィ ドウ幅を基準に使用 ・複数の条件で絞込みも可能 （width : 481px∼768pxなど） ・CSSフ イ ァ ル単位 / CSSフ イ ァ ル内での分岐 ・IE8以下は未対応なので注意
- 39. ２） スポンシブ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ファイ ル
- 40. ２） スポンシブ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; } }
- 41. 移動 変形 移動 変形
- 42. ２） スポンシブWebデザイ レ ンの実装 デモ
- 44. ２） スポンシブWebデザイ レ ンの実装 viewport ブラウザのウ ン ィ ドウサ ズの う の。 イ よ なも width,initial-scaleなどの値を設定可能。 width=600 → ウ ン ィ ドウサ ズを600pxとみなす イ width=device-width → 端末がも つ固有の値 例) iPhone → 320px / 320px 例) GALAXY S II → 360px / 640px initial-scale=1 → 初期の拡大率を1倍に指定 etc...
- 45. ２） スポンシブWebデザイ レ ンの実装 viewport <head> <title>静岡のWeb系勉強会 Knock! Knock!</title> <meta name="viewport" content="width=device-width,initial-scale=1"> </head>
- 46. デモ
- 47. ３）レスポンシブWebデザ ンの課題 イ
- 48. ３） スポンシブWebデザイ レ ンの課題 画像のRetina （HiDPI）対応 DevicePixelRatio（viewport上の1pxとデバイス上で使用される実px数の比率） ・ の比率に適した画像でないと、 こ 画像表示が荒れる ・1系、 1.5系、 2系、 3系… ・DevicePixelRatioによ る画像の出しわけ → JavaScript / サーバーサ ド / 仕様も策定中… イ ※ HiDPI → High Dot Per Inch。高解像度
- 49. ３） スポンシブWebデザイ レ ンの課題 悩ま ブレイ しい クポイ ト ン ・バラバラなス リーンサ ズ ク イ ・DevicePixelRatioも様々 ・2012年発売 : ス マホ98機種 / タブレット132機種 ・大型化する スマホ / 小型化するタ ブレット → ブレイ クポイ トの設定が難しい… ン ※ ブレイクポイ ト : Media QueriesでCSSを切り替え ン る分岐点
- 50. ３） スポンシブWebデザイ レ ンの課題 表示スピード最適化とdisplay:none ・限られた表示スペース ・貧弱なマシンパワー（数世代前のPCレベル） ・時と場所を選ぶ通信環境 （LTEが入ればいいけど…） →リソースは少ないほう がいい display:noneは存在する要素を、表示上見えな するだけ く → モバイ ァースト ルフ 「PC-某コンテンツ=モバイ か 「モバイ ル」 ら ル+付加コンテンツ=PC」へ
- 51. ３） スポンシブWebデザイ レ ンの課題 何のためのスマホ対応？ ・スマホの購入動機 → PCサ トが見たい イ （お客さまの「赤く て」 し と同じで、鵜呑みにできないけど…） ・デバイ スによ て異なる持ち方 / 操作法 っ ・シチュエーシ ンで欲しい情報は変わる ョ ex. 時 タイ ・ ミング、 場所、目的/状況 etc... → デバイ “対応” “最適化” ス と は違う
- 52. ３） スポンシブWebデザイ レ ンの課題 ユーザーの ニー ・ ンテク ト TPOに配慮し ズ コ ス ・ それに合わせた設計が必要 実装スキ り ルよ も難しい…
- 53. ３） スポンシブWebデザイ レ ンの課題 Google先生がRWDを推奨… PC用のページとモバイ ル用のページを単一のURLと す こ る とができ ため、 る ユーザーにと てはシェ っ アやリン クが容易であ Googleのアルゴリ り、 ズムにと ってはコ ンテンツを適切にイ ンデッ スでき よ にな ます。 ク る う り ユーザーエージェントの異なるGooglebotごとにペー ジをクロールする必要がないため、Googleが り効率 よ 的にコンテンツを発見す こ る とができます。
- 54. ３） スポンシブWebデザイ レ ンの課題 Google先生の都合…ですよね？
- 55. まとめ
- 56. ・マルチデバイス対応のアプローチ アプリ / 専用ページ / そのま / RWD ま ・実装の基本要素 フレキシ ブルレイ ト / フ アウ レキシブルイメージ Media Queries / viewport ・RWDは万能ではない HiDPI対応 / マシンパワー 通信速度 / コ ク ト ・ ンテ ス
- 57. ところで…
- 62. 詳しく 【発展編】 ！ は で
- 63. 実装に困っ ら た ご連絡ください！
- 64. 本日はあ がと ございま り う した ご連絡・ご質問など下記までお願いし ます E-mail : info@hamnaly.com Facebook / Twitter : yabecchy