My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

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+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/


参考書:

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

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