書式
@media 種類 { ... }
対象
-
継承
-
初期値
-
バージョン
-
対応ブラウザ
Win IE4.0以降, Mac IE5.0, Firefox, Netscape 6.0以降, Safari
解説
表示対象のデバイスを指定します。以下のデバイスが指定できます。複数のデバイスに同じスタイルを指定する場合には、カンマで区切って記述します。all, screen, print以外は動作しないブラウザがあります。
| 設定名 |
方法 |
| all |
全てのデバイス |
| screen |
スクリーン（画面） |
| print |
プリンタ |
| braille |
点字デバイス |
| embossed |
点字プリンタ |
| handheld |
ハンドヘルド機器 |
| projection |
プロジェクタ |
| speech |
音声デバイス |
| tty |
テレタイプ（ターミナル） |
| tv |
テレビ |
サンプルコード
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
@media screen {
p {
color:red;
background-color:yellow;
}
}
@media print {
p {
color:blue;
background-color:white;
}
}
--></style>
</head>
<body>
<p>表示デバイスに応じてスタイルが変わります。</p>
</body>
</html>