CSS

Cascading Style Sheets.

media 属性 / @media

　HTML4 や CSS2 でも、link 要素の media 属性や @media に「screen」や「print」を指定して、CSS の適用対象となるメディアを限定することは可能でした。CSS3 のメディアクエリではこれがさらに拡張され、メディア特性と論理演算子が使用できるようになりました。これによって、「メディアタイプが「screen」で画面の幅が 480px 以下の機器にのみ適用」「メディアタイプが「screen」でウィンドウの幅が 1000px 以上の状態の時にのみ適用」といった指定が可能になります。

　メディア特性は、CSS のプロパティと同様の書式で、CSS と同じ単位を使用して () の中に書き込みます。大文字と小文字は区別されません。

メディア特性

width

ウィンドウの幅

min-width

最小のウィンドウの幅

max-width

最大のウィンドウの幅

height

ウィンドウの高さ

min-height

最小のウィンドウの高さ

max-height

最大のウィンドウの高さ

device-width

画面の幅

min-device-width

最小の画面の幅

max-device-width

最大の画面の幅

device-height

画面の高さ

min-device-height

最小の画面の高さ

max-device-height

最大の画面の高さ

論理演算子

and

AND : かつ（区切りとして使用）

,

OR : または（区切りとして使用）

not

NOT : 〜でない（前につけて使用）

only

※古いブラウザに適用させないために使用。対応ブラウザは「only」を無視（前につけて使用）。

使用例

　使用例では、link 要素を使ってウィンドウの横幅が 1200 ピクセル以上の場合は「a.css」、ウィンドウの横幅が 801〜1199 ピクセルの場合は「b.css」、ウィンドウの横幅が 800 ピクセル以下の場合は「c.css」を読み込ませています。読み込んで適用する CSS は、ウィンドウの横幅に応じてリアルタイムに変化します。