<link rel="stylesheet" href="" title="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ / （body内で利用できる場合：フロー・コンテンツ / フレージング・コンテンツ link要素の本文参照） |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 / （body内で利用できる場合：フレージング・コンテンツが置ける場所 link要素の本文参照） |
| 内容 | 無し（空要素） |
link要素（外部のCSSスタイルを読み込む）に以下の設定を行うと、スタイルシートを固定スタイルシート、優先スタイルシート、代替スタイルシートに分類することができます。
この設定を行うと、対応しているブラウザでは優先と代替のスタイルシートを切り替えられるようになります。
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">
| 属性 | 値 | ||
|---|---|---|---|
| 必須属性（この設定を行う場合） | |||
rel="" |
現在の文書から見たリンク先の関係 | stylesheet |
スタイルシート |
href="" |
リンク先の指定 | URL | 読み込むスタイルシートファイルを指定 |
| グローバル属性（この要素上では、title属性が特別な意味を持ちます） | |||
title="" |
スタイルの設定名 | テキスト | 任意の名前を指定 |
3タイプのスタイルシート
以下の方法で、スタイルシートを3つのタイプに分類することができます。
- 固定スタイルシート
-
<link rel="stylesheet" href="common.css">rel属性の値を
stylesheetにし、かつtitle属性を指定しないようにします。（通常の指定方法です）このタイプのスタイルシートは、常に適用されることになります。
- 優先スタイルシート
-
<link rel="stylesheet" href="basic.css" title="優先スタイル">rel属性の値を
にし、かつtitle属性でスタイル名を指定します。stylesheetこのタイプのスタイルシートは、固定スタイルシートと共に優先的に適用されることになります。
- 代替スタイルシート
-
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">rel属性の値を
stylesheet alternateにし、かつtitle属性でスタイル名を指定します。このタイプのスタイルシートは、デフォルトでは適用されません。ブラウザの操作で切り替えた場合に、優先スタイルシートの代わりとしてこのスタイルシートが適用されることになります。
スタイルシートのグループ化
同じスタイル名を持たせることによって、複数のスタイルシートをグループ化することができます。
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="basic1.css" title="優先スタイル">
<link rel="stylesheet" href="basic2.css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt1.css" title="代替スタイル">
<link rel="stylesheet alternate" href="alt2.css" title="代替スタイル">
上記の場合は、優先スタイルというスタイル名によって basic1.css と basic2.css を、代替スタイルというスタイル名によって alt1.css と alt2.css をグループ化しています。
- グループ単位でスタイルが適用されることになります。
スタイルシートの切り替え方法
例えばFirefoxの場合は、表示 → スタイルシート の操作でスタイルシートを切り替えることができます。
title属性の値が、このメニュー内に表示されることになります。
使用例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">
<title>スタイルシートの切り替え例</title>
</head>
<body>
<h1>スタイルシートの切り替え例</h1>
<p>代替スタイルを選択すると、見出しテキストなどの色が変化します。</p>
<h2>固定スタイルの内容（common.css）</h2>
...
</body>
</html>
- 表示例
