<style title=""></style>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ |
| 利用場所 | メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素内 |
| 内容 | スタイルシートのコード |
style要素に title="" を追加すると、代替のスタイルシートを指定することができます。
この指定を行うと、対応しているブラウザでは代替のスタイルシートを選択できるようになります。
<style title="代替スタイルシート">
ここにスタイルシートを記述します
</style>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性（この要素上では、title属性が特別な意味を持ちます） | |||
title="" |
スタイルの設定名 | テキスト | 任意の名前を指定 |
先に記述した代替スタイルシートが優先的に適用され、2番目以降の代替スタイルシートはブラウザの操作によって適用されることになります。（未対応のブラウザでは全てのスタイルが適用されてしまいます）
<style>スタイルA</style>
<style title="代替スタイル1">スタイルB</style>
<style title="代替スタイル2">スタイルC</style>
<style title="代替スタイル3">スタイルD</style>
例えば、上記のように指定した場合は、各スタイルは次のように適用されます。
- スタイルAは、常に適用されることになります。（title属性を指定していないので）
- スタイルBは、
スタイルA
と共に優先的に適用されることになります。 - スタイルCと
スタイルD
は、デフォルトでは適用されません。ブラウザの操作で切り替えた場合に、スタイルBの代わりとしてこれらのスタイルが適用されることになります。
スタイルシートの切り替え方法
例えばFirefoxの場合は、表示 → スタイルシート の操作でスタイルシートを切り替えることができます。
title属性の値が、このメニュー内に表示されることになります。
使用例
<!DOCTYPE html>
<html>
<head>
<title>スタイルシートの切り替え例</title>
<style>
body {
margin: 20px;
padding: 0;
background-color: #ffffff;
color: #000000;
}
</style>
<style title="スタイル1">
h1 {
color: #ff0000;
}
</style>
<style title="スタイル2">
h1 {
color: #00ff00;
}
</style>
<style title="スタイル3">
h1 {
color: #0000ff;
}
</style>
</head>
<body>
<h1>スタイルシートの切り替え例</h1>
<p>代替スタイルを選択すると、見出しテキストの色が変化します。</p>
...
</body>
</html>
- 表示例
