<style title=""></style>

ブラウザ
  • Fx
  • O
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / 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属性の値が、このメニュー内に表示されることになります。

使用例

3つの代替スタイルシートを設定した例

<!DOCTYPE html>
<html>
<head>

<title>スタイルシートの切り替え例</title>

<style>

body {
margin: 20px;
padding: 0;
background-color: #e0e0e0;
}

h1 {
padding: 3px;
font-size: 150%;
}

</style>

<style title="スタイル1">

h1 {
background-color: #808080;
color: #ffffff;
}

</style>

<style title="スタイル2">

h1 {
border: 2px #000000 solid;
}

</style>

<style title="スタイル3">

h1 {
background-color: #ffffff;
border: 1px #000000 solid;
color: #ff0000;
}

</style>

</head>
<body>

<h1>スタイルシートの切り替え例</h1>

<p>代替スタイルを選択すると、見出しのデザインが変化します。</p>

...

</body>
</html>

表示例

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