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)">
コメント