CSS辞典 使えるメディアタイプとメディアクエリの種類
CSSを出力デバイス別に指定するには「メディアタイプ」を指定します。また、CSS3からはデバイスの種類をより具体的に指定できる「メディアクエリ」が定義されました。
メディアタイプの種類
| キーワード | デバイスの種類 |
|---|---|
| all | すべてのデバイス |
| braille | 点字用ディスプレイ |
| embossed | 点字用プリンター |
| handheld | モバイルデバイス |
| プリンター | |
| projection | プロジェクトー |
| screen | ディスプレイ |
| speech | 音声出力デバイス |
| tty | 固定幅フォントで出力するデバイス |
| tv | テレビ |
<link href="tv.css" rel="stylesheet" type="text/css" media="tv">
<link href="print.css" rel="stylesheet" type="text/css" media="print">メディアクエリの種類
| キーワード | 解説 |
|---|---|
| width | ディスプレイの幅。max-、min-の接頭辞で上限・下限を指定可 |
| height | ディスプレイの高さ。max-、min-の接頭辞で上限・下限を指定可 |
| device-width | 表示領域の幅。max-、min-の接頭辞で上限・下限を指定可 |
| device-height | 表示領域の高さ。max-、min-の接頭辞で上限・下限を指定可 |
| orientation | デバイスの向き。値は縦向きがportrait、横向きがlandscape |
| aspect-ratio | ディスプレイの縦横比。max-、min-の接頭辞で上限・下限を指定可 |
| device-aspect-ratio | 表示領域の縦横比。max-、min-の接頭辞で上限・下限を指定可 |
| color | カラーディスプレイの色のビット数。max-、min-の接頭辞で上限・下限を指定可 |
| color-index | カラールックアップテーブルの数。max-、min-の接頭辞で上限・下限を指定可 |
| monochrome | 白黒ディスプレイのビット数。カラーディスプレイの場合は「0」。max-、min-の接頭辞で上限・下限を指定可 |
| resolution | ディスプレイの解像度。max-、min-の接頭辞で上限・下限を指定可 |
| scan | メディアタイプがtvの場合の画面の走査方法。値はprogressive、またはinterlace。 |
| grid | ディスプレイの表示方法。メディアタイプがttyの場合は「1」。それ以外は「0」 |
link要素でCSSを読み込むとき、メディアタイプがモバイルデバイス（handheld）及びディスプレイ（screen）でディスプレイの幅が10em以下の場合に、指定したスタイルを読み込みます。
<link rel="stylesheet" media="handheld and (min-width: 10em),screen and (min-width: 10em)">