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

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

  • プロトタイプを作る
可変レイアウト
  • 可変レイアウトによるレスポンシブ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>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ビューポートの横幅指定</title>
</head>
<body>
	
</body>
</html>