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

メモ:

@media

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

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

メディアの種類

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

メディアの指定方法

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

  • スタイルの定義に@media宣言で指定する。
  • 外部ファイルで定義されたCSSとHTMLファイルを関連付ける時に指定する。
  • @importでCSSを読み込む時に指定する。

スタイルの定義に@media宣言で指定する。

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

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

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

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

外部ファイルで定義されたCSSとHTMLファイルを関連付ける時に指定する。

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でCSSを読み込む時に指定する。

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

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

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

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

メディアグループ

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

continuous
braille, handheld, screen, tty, tv
paged
embossed, handheld, print, projection, tv
visual
handheld, print, projection, screen, tty, tv
aural
aural, tv
tactile
braille , embossed
grid
braille, embossed, handheld, tty
bitmap
handheld, print, projection, screen, tv
interactive
aural, braille, handheld, projection, screen, tty, tv
static
aural, braille, embossed, handheld, print, screen, tty, tv
all
すべてのメディアタイプ