<style media=""></style>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / 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>

表示例

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