レスポンシブWebデザインの基本

マルチデバイス

レスポンシブWebデザイン

  • レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと
  • 技術的には
    1. Fluid Grid（フルードグリッド）
    2. Fluid Image（フルードイメージ）
    3. Media Queries（メディアクエリ）

　　　という3つのテクニックを用いて実現する

レスポンシブWebデザインの基本設定

<meta name="viewport" content="パラメータ値">


設定 パラメータ 指定できる値

ビューポートの横幅

 width 数値(ピクセル)/device-width
ビューポートの高さ height 数値(ピクセル)/device-height
ページの拡大率 initial-scale 拡大率
拡大率の最小値 minimum-scale 拡大率
拡大率の最大値 maximum-scale 拡大率
ユーザーによる

拡大・縮小の可否		 user-scalable yes/no
ターゲットdensity target-densitydpi 数値(dpi)/device-dpi/low-dpi/

medium-dpi/high-dpi

ビューポートの横幅指定
  • 何も設定をしないとデフォルトの「980px」に設定されます
  • 「meta name="viewport"」を追加する
  • 「content="width=device-width"」を指定する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ビューポートの横幅指定</title>
</head>
<body>
	
</body>
</html>

widthとdevice-widthの違い

  • CSS3の規格では「width」はビューポートの横幅、「device-width」はスクリーンの横幅を指定するものと定義されています
  • デバイスにより処理が変わります
デスクトップの場合
  • 「width」はブラウザの横幅
  • 「device-width」はモニタの画面解像度
スマートフォンやタブレットの場合
  • 「width」はビューポートの横幅
  • 「device-width」はOSによって処理が変わります


OSごとの処理に違いがあることから、レスポンシブWebデザインでは「device-width」ではなく、「width」を利用し、ビューポートの横幅で判別をおこなうのが一般的となっています。
画像解像度で判別をおこないたいときには、JavaScriptで直接画面解像度の値を取得して処理します

orientationで画面の向きを判別する
  • 特定の「orientation」を利用すると画面の向きを判別することができます


幅指定の特性

主な特性 閲覧環境の特性 値
width 画面（ビューポート）の横幅 数値
mini-width 画面（ビューポート）の横幅の最小値 数値
max-width 画面（ビューポート）の横幅の最大値 数値
orientation デバイスの向き（横/縦）

landscape

portrait

densityとは

  • ディスプレイサイズや画面解像度が異なるデバイスにおいて、同じコンテンツが同じ大きさで見えるように考えられた仕組み
  • 各デバイスでdpiに応じてdensityの幅が設定されます
  • dpiはデバイスのディスプレイサイズと画像解像度から算出されます
  • densityが「１」のデバイスを基準とし、コンテンツが同じ大きさで見えるように処理が行われる

ppiによるデバイスの分類 基準となるdpi density

(device pixel ratio)
low 120 0.75
medium 160 1
high 240 1.5
extra high 320 2

ビューポート

  • ビューポートは、デバイスのスクリーンを幅：何px、高さ：何pxとして扱うかを設定して作成されます
  • ブラウザがデフォルトで設定するビューポート
  • iOSやAndroidに標準で搭載されたモバイル用ブラウザは、ビューポートの横幅をデフォルトで980pxに設定します
  • Windows Phoneの標準ブラウザは、ビューポートの横幅を1024pxに設定します
  • デスクトップ環境では、ブラウザ画面がビューポートとして扱われます
  • この幅のまま小さなディスプレイに表示すると小さすぎて読みづらいということになります
デバイスの画面解像度に設定したビューポート
  • ブラウザが作成するビューポートの幅は、以下の記述で指定できます
<meta name="viewport">


この記述の場合、デバイスのディスプレイの幅が同じでも画面解像度によってコンテンツの表示範囲が大きく変わってくるという問題が発生します

densityに基づいたビューポート
  • ビューポートをデバイスの解像度とdensityに基づいた横幅に設定すると、異なるデバイスの幅でもコンテンツが同じ大きさで見えるようにすることができます
  • レスポンシブWebデザインでは、この横幅を利用します

densityに基づいたビューポートの解像度 = デバイスの解像度 ÷ デバイスに設定されたdensityの値

デザインを切り替えるための横幅の決定

  • 画面サイズをいくつかの範囲に切り分け、範囲ごとにWebページのデザインを切り替えることになります

f:id:web-design-lesson:20160604202937j:plain

レスポンシブ主要レイアウトパターン

可変レイアウト
  • 可変レイアウトによるレスポンシブWebデザイン
  • 最も利用頻度の高いレイアウトパターン
固定レイアウト
  • 各画面サイズで固定レイアウトをおこなう
  • 画面サイズに応じて4段組、2段組、1段組とレイアウトを変える
可変レイアウト+固定レイアウト
  • 広告のように横幅を変えることができないパーツがある場合に有効
  • サイドバーの横幅を固定したレイアウト