読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

Responsive Web Design(レスポンシブWebデザイン)

Web閲覧環境の多様化

  • Android端末の多様化
  • スマートフォンで表示されるWebページはより柔軟性のある実装を求められる状況にあります
モバイルファースト


f:id:web-design-lesson:20160819092024p:plain

Web製作現場でのモバイルファースト

プログレッシブエンハンスメント

プログレッシブエンハンスメント(狭義)
  • 機能実装が進んでいないブラウザーを前提として構築し、より機能実装が進んだブラウザーへの対応を加えていくという考え方
グレースフルでグレーション(Graceful Degradation)
  • 機能実装が進んだブラウザーを前提として構築し、実現できないブラウザーに対しては機能を間引いていくという考え方
ポリフィル(Polyfill)
  • 実装の進んでいないブラウザーで、代替技術を利用して実装するという考え方
  • たとえばCSS3のプロパティが利用できない旧バージョンのIEでポリフィルを実装する「CSS3 PIE」がよく利用されています

レスポンシブWebデザインの3大要素

  1. Fluid grid:レイアウトを設定する際にpx数等で固定してしまわずに、主に%などを用いいて、表示できる領域に対して柔軟に対応するアプローチです
  2. Flexible images(Fluid images):画像も表示領域に対して柔軟にサイズを変えていく実装
  3. Media queries:同一のHTMLで、スタイリングを切り替えるのは、メディアクエリによってブラウザの情報を取得することで行います

レスポンシブ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が「1」のデバイスを基準とし、コンテンツが同じ大きさで見えるように処理が行われる

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

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

ビューポート

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


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

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

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

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

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

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

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

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

レスポンシブWebデザインのデメリット

  1. CSSの記述が複雑になる
  2. 無駄な処理が生じる恐れがある
  3. PCサイトに切り替えられない
  4. IE8以前の古いブラウザをサポートできない