CSSの基礎知識
メディアタイプとメディアクエリ
CSSを出力デバイス別に指定するには「メディアタイプ」を指定します。また、CSS3からはデバイスの種類をより具体的に指定できる「メディアクエリ」が定義されました。
メディアタイプの種類
| キーワード | デバイスの種類 |
|---|---|
| all | すべてのデバイス |
| braille | 点字用ディスプレイ |
| embossed | 点字用プリンター |
| handheld | モバイルデバイス |
| プリンター | |
| projection | プロジェクター |
| screen | ディスプレイ |
| speech | 音声出力デバイス |
| tty | 固定幅フォントで出力するデバイス |
| tv | テレビ |
以下の例では、link要素でCSSを組み込むときにmedia属性で該当するメディアを指定しています。テレビ用には「tv.css」が、プリンター用には「print.css」が組み込まれます。
HTML<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）でディスプレイの幅が20em以下の場合に、指定したスタイルが組み込まれます。
HTML<link rel="stylesheet" media="handheld and (min-width: 20em), screen and (min-width: 20em)">
