HTML5+CSS3【マルチデバイス】―レスポンシブWebデザイン主要レイアウトパターン

HTML5 reference 授業



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


  • プロトタイプを作る


可変レイアウト

  • 可変レイアウトによるレスポンシブ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-scalableyes/no
ターゲットdensityarget-densitydpi数値(dpi)/device-dpi/low-dpi/medium-dpi/high-dpi




ビューポートの横幅指定

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


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ビューポートの横幅指定</title>
</head>
<body>
	
</body>
</html>