6/10 [HTML5] レスポンシブWebデザイン

• [HTML5] レスポンシブWebデザイン

参照：
http://d.hatena.ne.jp/web-0127/20140701/p1

レスポンシブWebデザイン

デバイスごとのマルチソースではなく、ワンソースで対応する

参考：
slideshare 「レスポンシブWebデザインの基礎」
http://www.slideshare.net/HiroyukiOgawa/rwd-basic

メリット：
URLが一本化できるため、SEO効果が高い
（マルチソースの場合、デバイスごとにアクセスが分散する）

ポイント：
Viewport（ビューポート）

• ビューポートをどう扱うか？

[参照]
http://ascii.jp/elem/000/000/699/699842/

ビューポート（仮想ウインドウサイズ）

<meta name="viewport" content="width=device-width">

上記は、「viewportの幅をデバイスのスクリーン幅に合わせる」という意味

参照：
テキスト p.30

スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)

スマートフォン用サイト

画像優先、デザイン > システム

HTML5によるコーディング

レイアウト（デザイン）用のdiv id指定はOK
それ以外はセクション

デバイスに応じて表示を切り替えるしくみ

以下2つの記述がデバイスに応じた可変表示のための設定なのだそう。

1. meta name

<meta name="viewport" content="width=device-width">

2. max-width:100%

img {
  max-width:100%;
}

キーワード

ブレイクポイント

幅に合わせて画像サイズを調整するポイント

ポートレート（縦向き）

ランドスケープ（横向き）

モバイルファースト

ターゲットが多い方を優先して考える

参考：
「アップルとマイクロソフトが採用をはじめた“モバイルファースト”とは？ | Web担当者Forum:」
http://web-tan.forum.impressrd.jp/e/2011/06/17/10487

フルードイメージ（fluid image）

文字サイズを維持しながら、画像は画面幅に応じて縮小される

参考：
「フルードグリッドとレスポンシブWebデザインの完成」
http://ascii.jp/elem/000/000/700/700502/

フルードグリッド

参考：
「ASCII.jp：フルードグリッドとレスポンシブWebデザインの完成 (1/3)｜ゼロから始めるレスポンシブWebデザイン入門:」
http://ascii.jp/elem/000/000/700/700502/

参考書：

スマートフォンサイト制作入門 〔レスポンシブ・ウェブデザイン対応〕