HTML5+CSS3【マルチデバイス】―CSS3のメディアクエリ０２

HTML5 授業



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


【 例 】

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


【 書式 】
《sample.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>メディアクエリ</title>
<link rel="stylesheet" href="style-l.css">
<link rel="stylesheet" href="style-m.css" media="only scree and (min-width:600px) and (max-width:979px)">
<link rel="stylesheet" href="style-s.css" media="only scree and (max-width:599px)">
</head>
<body>
	
</body>
</html>

１つのCSSファイルで管理する

【 書式 】
《style-l.css》

body {
	margin: 0;
}

…

@media only screen and (min-width:600px) and (max-width:979px) {
	#container {width: 100%;}
…
}

@media only screen and (max-width:599px) {
	#container {width: 100%;}
…
}

widthとdevice-widthの違い


  • CSS3の規格では「width」はビューポートの横幅、「device-width」はスクリーンの横幅を指定するものと定義されている
  • デバイスにより処理が変わる


デスクトップの場合

  • 「width」はブラウザの横幅
  • 「device-width」はモニタの画面解像度


スマートフォンやタブレットの場合

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


orientationで画面の向きを判別する

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