<style media=""></style>
| ブラウザ |
|
|---|---|
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 |
| 内容 | スタイルシートのコード |
style要素に media="" を追加すると、スタイルの対象メディア（そのスタイルをどのメディアに対して適用させるか）を指定することができます。
<style media="screen">
ここにスタイルシートを記述します
</style>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
media="" |
対象とするメディア | メディアクエリ | スタイルの適用対象とするメディアを指定 （初期値は all） |
media属性の値（メディアクエリ）は、カンマ（ , ）で区切って複数指定することが可能です。
<style>スタイルA</style>
<style media="screen, projection">スタイルB</style>
<style media="handheld">スタイルC</style>
<style media="print">スタイルD</style>
例えば、上記のように指定した場合は、各スタイルは次のように使用されます。
スタイルA
は、全てのメディアで使用されます。（初期値がallのため）スタイルB
は、パソコン（screen）とプロジェクタ（projection）で使用されます。スタイルC
は、携帯端末（handheld）で使用されます。スタイルD
は、プリンタ（print）で使用されます。
使用例
<!DOCTYPE html>
<html>
<head>
<title>対象メディアの指定例</title>
<style>
body {
margin: 20px;
padding: 0;
}
h1 {
padding: 3px;
font-size: 150%;
}
</style>
<style media="screen">
body {
background-color: #e0e0e0;
font-size: 80%;
color: #808080;
}
h1 {
background-color: #808080;
color: #ffffff;
}
</style>
<style media="print">
body {
background-color: #ffffff;
font-size: 120%;
color: #000000;
}
h1 {
border: 2px #000000 solid;
}
p.back {
display: none;
}
</style>
</head>
<body>
<h1>対象メディアの指定例</h1>
<p>「印刷プレビュー」で確認すると、プリント用のスタイルで表示されます。</p>
...
</body>
</html>
- 表示例
