<link rel="stylesheet" href="" media="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容

link要素(外部スタイルシートを読み込む)media="" を追加すると、スタイルの対象メディア(そのスタイルをどのメディアに対して適用させるか)を指定することができます。


<link rel="stylesheet" href="example.css" media="screen">

属性
必須属性
rel="" 現在の文書から見たリンク先の関係 stylesheet スタイルシートのリンクタイプを指定
href="" リンク先の指定 URL 読み込むスタイルシートファイルを指定
任意属性
media="" 対象とするメディア メディアクエリ スタイルの適用対象とするメディアを指定 (初期値は all

media属性の値(メディアクエリ)は、カンマ( , )で区切って複数指定することが可能です。

<link rel="stylesheet" href="style0.css">
<link rel="stylesheet" href="style1.css" media="screen, projection">
<link rel="stylesheet" href="style2.css" media="handheld">
<link rel="stylesheet" href="style3.css" media="print">

例えば、上記のように指定した場合は、各スタイルは次のように使用されます。

  • style0.cssで設定したスタイルは、全てのメディアで使用されます。(初期値が all のため)
  • style1.cssで設定したスタイルは、パソコンscreen)とプロジェクタprojection)で使用されます。
  • style2.cssで設定したスタイルは、携帯端末handheld)で使用されます。
  • style3.cssで設定したスタイルは、プリンタprint)で使用されます。

使用例

パソコン向けとプリンタ向けのスタイルを設定した例

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="all.css">
<link rel="stylesheet" href="screen.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">

<title>対象メディアの指定例</title>

</head>
<body>

<h1>対象メディアの指定例</h1>

<p>「印刷プレビュー」で確認すると、プリント用のスタイルで表示されます。</p>

<h2>全てを対象としたスタイル(all.css)</h2>

...

</body>
</html>

表示例

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