2014-11-23

2014-11-23

レスポンシブWebデザインのレイアウトパターンAdd Star

RWD

 

 

レスポンシブWebデザイン

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

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

可変レイアウト
  • 可変レイアウトによるレスポンシブWebデザイン
  • 最も利用頻度の高いレイアウトパターン

 

Sサイズ

 

  • 599px以下

 

Mサイズ

 

  • 600px～979px

 

Lサイズ

 

  • 980px以上

固定レイアウト
  • 各画面サイズで固定レイアウトをおこなう
  • 画面サイズに応じて4段組、2段組、1段組とレイアウトを変える

 

Sサイズ

 

  • 639px以下

 

Mサイズ

 

  • 640px～979px

 

Lサイズ

 

  • 980px以上

可変レイアウト+固定レイアウト
  • 広告のように横幅を変えることができないパーツがある場合に有効
  • サイドバーの横幅を固定したレイアウト

 

Sサイズ

 

  • 649px以下

 

Mサイズ

 

  • 650px～979px

 

Lサイズ

 

  • 980px以上

レスポンシブ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

 


ビューポートの横幅指定
  • 何も設定をしないとデフォルトの「800または980px」に設定されます
  • 「meta name="viewport"」を追加する
  • 「content="width=device-width"」を指定する

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="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

 

 


特定の画面サイズで表示したときに適用するスタイルシート

 

 

<link rel="stylesheet" href="スタイルシート名.css media="only メディアタイプ and (特性)" >

 

 


デザインのベースとなるスタイル

例えば、

  • style-s.css：599px以下
  • style-m.css：600px～979px
  • style-l.css：980px以上

f:id:web-0818:20141001000257p:image


《sample.html》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width">
<title>メディアクエリ</title>
<linkrel="stylesheet"href="style-l.css">
<linkrel="stylesheet"href="style-m.css"media="only screen and (min-width:600px) and (max-width:979px)">
<linkrel="stylesheet"href="style-s.css"media="only screen and (max-width:599px)">
</head>
<body>
	
</body>
</html>

※スマートフォンの場合は、自動的に「style-s.css」が選択されます。