<style media=""></style>

更新日
仕様 HTML Living Standard
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容 スタイルシートのコード

style要素media="" を追加すると、スタイルの対象メディア(そのスタイルをどのメディアに対して適用させるか)を指定することができます。


<style media="screen">

ここにスタイルシートを記述します

</style>

属性
任意属性
media="" 対象とするメディア メディアクエリ スタイルの適用対象とするメディアを指定 (既定値は all

次の例では、メディアタイプscreenprint)によってスタイルの適用対象を指定しています。

<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>

表示例

サンプル画面へ新規ウィンドウで表示

上記と同様の指定を@mediaで行った例

<!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>

表示例

サンプル画面へ新規ウィンドウで表示