<link rel="stylesheet" href="" title="">
| ブラウザ |
|
|---|---|
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 |
| 内容 | 空 |
link要素（外部スタイルシートを読み込む）に以下の設定を行うと、スタイルシートを固定スタイルシート、優先スタイルシート、代替スタイルシートに分類することができます。
この設定を行うと、対応しているブラウザでは優先と代替のスタイルシートを切り替えられるようになります。
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">
3タイプのスタイルシート
以下の方法で、スタイルシートを3つのタイプに分類することができます。
- 固定スタイルシート
-
<link rel="stylesheet" href="common.css">rel属性の値を
にし、かつtitle属性を指定しないようにします。（通常の指定方法です）stylesheetこのタイプのスタイルシートは、常に適用されることになります。
- 優先スタイルシート
-
<link rel="stylesheet" href="basic.css" title="優先スタイル">rel属性の値を
にし、かつtitle属性でスタイル名を指定します。stylesheetこのタイプのスタイルシートは、固定スタイルシートと共に優先的に適用されることになります。
- 代替スタイルシート
-
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">rel属性の値を
にし、かつtitle属性でスタイル名を指定します。stylesheet alternateこのタイプのスタイルシートは、通常は適用されません。ブラウザの操作で切り替えた場合に、優先スタイルシートの代わりとしてこのスタイルシートが適用されることになります。
スタイルシートのグループ化
同じスタイル名を持たせることによって、複数のスタイルシートをグループ化することができます。
<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>
- 表示例
