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効果が高い
(マルチソースの場合、デバイスごとにアクセスが分散する)
- ビューポートをどう扱うか?
[参照]
http://ascii.jp/elem/000/000/699/699842/
ビューポート(仮想ウインドウサイズ)
<meta name="viewport" content="width=device-width">
上記は、「viewportの幅をデバイスのスクリーン幅に合わせる」という意味
参照:
テキスト p.30
スマートフォンサイトのためのHTML5+CSS3 (Web Designing BOOKS)
- 作者: エ・ビスコム・テック・ラボ
- 出版社/メーカー: マイナビ
- 発売日: 2012/08/31
- メディア: 単行本(ソフトカバー)
- 購入: 2人 クリック: 13回
- この商品を含むブログ (4件) を見る
スマートフォン用サイト
画像優先、デザイン > システム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/
参考書:
スマートフォンサイト制作入門 〔レスポンシブ・ウェブデザイン対応〕
- 作者: ネットイヤークラフト株式会社,荒井千佳,入江寿栄
- 出版社/メーカー: 技術評論社
- 発売日: 2013/08/21
- メディア: 大型本
- この商品を含むブログを見る