トップページの中の CSSの基本の中の メディアタイプ

メディアタイプ

  • 最終更新:2009年6月25日 15:11

メディアタイプの指定をする事で、どのデバイスを対象にスタイルを適用させるかを制御する事ができます。
たとえば、モニタ上に表示される場合と、プリンタで出力する場合では必要とする情報やレイアウトが変わってくる場合もあります。
このような場合に、メディアタイプの指定をするとプリント専用のCSSを作成したりすることが可能になります。

CSS2.1で指定されているメディアタイプ

all
全てのデバイスを対象とする
braille
点字の触角をフィードバックするデバイス
embossed
点字プリンタなどの点字出力デバイス
handheld
片手で持てる程度のサイズをしたPC
print
印刷用出力、印刷プレビューも含む
projection
プロジェクターなど投影表示を意図したデバイス
screen
PCのディスプレイ
speech
音声合成機器
tty
テレタイプ、ケータイなど、固定ピッチフォントで出力されるデバイス
tv
テレビ

これらのメディアタイプを指定する方法はいくつかありますが、ここではlink要素のmedia属性を使った方法と、@mediaルールを使った方法を説明します。
ちなみに、CSSの各プロパティは、それぞれ属するメディアタイプが定義されていて、そのメディアタイプ以外では適用されないようになっています。

link要素のmedia属性を使った方法

link要素を使う場合は、CSSファイルをhead要素の範囲内で、link要素によって読み込むときに、media属性にメディアタイプの指定をします。
このメディアタイプは、カンマ(,)区切りで複数指定する事も可能です。

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

@mediaルールを使った方法

@mediaルールを使う場合は、適用させたいメディアタイプの規則集合全てを囲うように書きます。link要素の方法と同じくカンマ(,)区切りで複数指定する事も可能です。

@media print, handheld {
  #sub {
    display: none;
  }

  html,
  body {
    background: #fff;
  }
}

このページの上部へ