CSS3のメディアクエリ

メディアクエリとスタイルシート

  • 横幅をいくつかの範囲にわけてデザインを切り替えます
  • 「CSS3メディアクエリ」を利用します
特定の画面サイズで表示したときに適用するスタイルシート




外部スタイルシートを読み込む



CSS内に設定を記述


@media only メディアタイプ and (特性)" {
　　　スタイルシートの設定
}

CSS内にから外部スタイルシートを読み込む


@media url("外部スタイルシート") only メディアタイプ and (特性);


メディアタイプの指定

メディアタイプ デバイスの種類
all すべて
screen スクリーン
print 印刷
handheld 携帯機器
projection プロジェクター
tv テレビ
tty 文字固定のデバイス
braille 点字ディスプレイ
embossed 点字プリンタ
speech 音声


主な特性の指定

主な特性 閲覧環境の特性 値
width 画面（ビューポート）の横幅 数値
mini-width 画面（ビューポート）の横幅の最小値 数値
max-width 画面（ビューポート）の横幅の最大値 数値
orientation デバイスの向き（横/縦）

landscape

portrait


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

例えば、

  • 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>


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


１つの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」を利用すると画面の向きを判別することができます