<link rel="stylesheet" href="" media="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ / （body内で利用できる場合：フロー・コンテンツ / フレージング・コンテンツ link要素の本文参照） |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 / （body内で利用できる場合：フレージング・コンテンツが置ける場所 link要素の本文参照） |
| 内容 | 無し（空要素） |
link要素（外部のCSSスタイルを読み込む）に media="" を追加すると、スタイルの対象メディア（そのスタイルをどのメディアに対して適用させるか）を指定することができます。
<link rel="stylesheet" href="example.css" media="screen">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性（この設定を行う場合） | |||
rel="" |
現在の文書から見たリンク先の関係 | stylesheet |
スタイルシート |
href="" |
リンク先の指定 | URL | 読み込むスタイルシートファイルを指定 |
| 任意属性 | |||
media="" |
対象とするメディア | メディアクエリ | スタイルの適用対象とするメディアを指定（既定値は all） |
次の例では、メディアタイプ（screen、print）によってスタイルの適用対象を指定しています。
<link rel="stylesheet" href="style1.css"><link rel="stylesheet" href="style2.css" media="screen"><link rel="stylesheet" href="style3.css" media="print">
style1.cssで設定したスタイルは、全てのデバイスで使用されます。（既定値がallのため）style2.cssで設定したスタイルは、パソコンやスマートフォンなど（screen）で使用されます。style3.cssで設定したスタイルは、プリンタ（print）で使用されます。
次のように、メディア特性（max-width）を組み合わせて指定することもできます。
<link rel="stylesheet" href="style4.css" media="screen and (max-width: 767px)">
style4.cssで設定したスタイルは、表示領域の幅が767px以下の場合に適用されることになります。
使用例
<!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>
- 表示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="all.css">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)">
<title>メディア特性の指定例</title>
</head>
<body>
<h1>メディア特性の指定例</h1>
<p>表示領域の幅が767px以下の場合は、mobile.cssのスタイルが適用されます。</p>
<h2>全てを対象としたスタイル（all.css）</h2>
...
</body>
</html>
- 表示例