CSS3 メディアクエリ

メディアタイプ

メディアクエリはCSS2からのメディアタイプを拡張したものです。「media=""」の部分をメディアタイプといい、下記のメディアタイプを指定します。

all

全て

screen

一般的なディスプレイ

braille

点字ディスプレイ

embossed

点字プリンタ

handheld

ハンドヘルドデバイス

print

印刷用

projection

プロジェクタ

tty

キャラクタ端末

tv

テレビ

メディアタイプによるCSSファイル指定例

<link rel="stylesheet" media="screen" href="style.css">

CSS内部に書く場合

@media screen { ここにスタイルを書く }

メディア特性

メディアタイプに加え、widthやheightなど媒体の特性によってCSSを振り分けることが出来ます。メディア特性には下記があります。

width

表示領域(viewport)の横幅

height

表示領域の縦幅

device-width

デバイスの横解像度

device-height

デバイスの縦解像度

orientation

表示領域(viewport)の向き

aspect-ratio

アスペクト比

color

色のビット数

color-index

端末の色のビット数

monochrome

グレースケール時の色ビット数

resolution

解像度

scan

走査方法

grid

文字格子メディアかどうか

メディアクエリの書式

メディアクエリではand, or, not演算子が使用できます。

16/9のscreen

@media screen and (device-aspect-ratio: 16/9) { スタイル }

横幅480px以上600px以下

@media (min-width: 480px) and (max-width:600px) { スタイル }

幅が750px以上または向きが縦向き（orientationは縦長か横長か否かを判断）

@media (min-width: 750px) or (orientation:portrait) { スタイル }