<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>
- 表示例