<style media=""></style>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 |
| 内容 | スタイルシートのコード |
style要素に media="" を追加すると、スタイルの対象メディア（そのスタイルをどのメディアに対して適用させるか）を指定することができます。
<style media="screen">
ここにスタイルシートを記述します
</style>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
media="" |
対象とするメディア | メディアクエリ | スタイルの適用対象とするメディアを指定 （既定値は all） |
次の例では、メディアタイプ（screen、print）によってスタイルの適用対象を指定しています。
<style>スタイルA</style>
<style media="screen">スタイルB</style>
<style media="print">スタイルC</style>
例えば、上記のように指定した場合は、各スタイルは次のように使用されます。
スタイルA
は、全てのデバイスで使用されます。（既定値がallのため）スタイルB
は、パソコンやスマートフォンなど（screen）で使用されます。スタイルC
は、プリンタ（print）で使用されます。
次のように、メディア特性（max-width）を組み合わせて指定することもできます。
<style media="screen and (max-width: 767px)">スタイルD</style>
スタイルD
は、表示領域の幅が767px以下の場合に適用されることになります。
使用例
<!DOCTYPE html>
<html>
<head>
<title>対象メディアの指定例</title>
<style>
body {
margin: 20px;
padding: 0;
background-color: #ffffff;
color: #000000;
}
</style>
<style media="screen">
h1 {
font-size: 200%;
color: #ff0000;
}
</style>
<style media="print">
h1 {
font-size: 160%;
}
p.back {
display: none;
}
</style>
</head>
<body>
<h1>対象メディアの指定例</h1>
<p>「印刷プレビュー」で確認すると、プリント用のスタイルで表示されます。</p>
...
</body>
</html>
- 表示例
<!DOCTYPE html>
<html>
<head>
<title>メディア特性の指定例</title>
<style>
body {
margin: 20px;
padding: 0;
background-color: #ffffff;
color: #000000;
}
</style>
<style media="screen and (max-width: 767px)">
body {
margin: 10px;
}
h1 {
font-size: 100%;
color: #ff0000;
}
</style>
</head>
<body>
<h1>メディア特性の指定例</h1>
<p>表示領域の幅が767px以下の場合は、見出しのテキストが「標準の文字サイズ＋赤色」で表示されます。</p>
...
</body>
</html>
- 表示例
<!DOCTYPE html>
<html>
<head>
<title>メディア特性の指定例2</title>
<style>
body {
margin: 20px;
padding: 0;
background-color: #ffffff;
color: #000000;
}
@media screen and (max-width: 767px) {
body {
margin: 10px;
}
h1 {
font-size: 100%;
color: #ff0000;
}
}
</style>
</head>
<body>
<h1>メディア特性の指定例2</h1>
<p>表示領域の幅が767px以下の場合は、見出しのテキストが「標準の文字サイズ＋赤色」で表示されます。</p>
...
</body>
</html>
- 表示例