出力先に応じてスタイルを変更するには

@media

CSSでは、出力先(メディア)に応じてスタイルを変更することができます。メディアは、いくつかに分類され、例えばコンピュータのディスプレイは、screenに分類されます。

例えば、コンピュータの画面用と印刷用にスタイルを変えるといったことができます。

メディアタイプ	対象
all	すべてのメディア
aural,speech	音声で出力するスクリーンリーダー等。speechは、CSS2.1での将来予約
braille	点字を出力するもの
embossed	点字のページを出力するプリンタ
handheld	携帯端末
print	印刷プレビューを含む印刷出力
projection	プロジェクタ等
screen	コンピュータのスクリーン
tty	固定ピッチ文字を使う装置
tv	テレビ。低解像度でスクロールに制限のあるデバイスです

メディアタイプを指定する方法は、3つの方法があります。

@media宣言を使うとスタイルシートの定義に複数のメディアタイプのスタイルを定義することができます。

@media print {
    body {font-size:10pt}
}
@media screen {
    body {font-size:medium}
}

複数のメディアで共通のスタイルを指定する場合、次のようにカンマで区切って指定します。

@media print, screen {
    body {font-size:medium}
}

HTML文書とCSSが関連付けられる時に指定するには、link要素にmedia属性を指定します。

<link href="layout.css" rel="stylesheet" type="text/css" media="print">

複数のメディアで共通のスタイルを指定する場合、次のようにカンマで区切って指定します。

<link href="layout.css" rel="stylesheet" type="text/css" media="screen,print">

他のスタイルシートから定義を読み込む時に@import宣言を使用します。この時、メディアタイプを指定することができます。

@import url("layout.css") print;

複数のメディアで共通のスタイルを指定する場合、次のようにカンマで区切って指定します。

@import url("layout.css") screen,print;

CSSでは、メディアをいくつかのグループに分けて定義しています。