<meta http-equiv="default-style" content="">
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | メタデータ・コンテンツ |
| 利用場所 | head要素の子要素として / head要素の子要素となるnoscript要素内 |
| 内容 | 無し（空要素） |
meta要素に http-equiv="default-style" を追加すると、デフォルトのスタイルシート（優先的に適用されるスタイルシート）を指定することができます。
<meta http-equiv="default-style" content="スタイルの設定名">
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
http-equiv="" |
指示の種類 | default-style |
デフォルトのスタイル |
任意属性（http-equiv を指定している場合は必須） |
|||
content="" |
指示の内容 | テキスト | スタイルの設定名を指定 |
この指定を行うには、予め代替スタイルシートを設定しておく必要があります。詳しくは下記のページをご覧ください。
- 固定・優先・代替のスタイルシート（link要素）
- 代替のスタイルシートを指定する（style要素）
link要素、またはstyle要素に設定されたtitle属性の値（スタイルの設定名）を、content="" の値として指定します。
例えば、次のように記述している場合、通常であれば優先スタイルの方が優先的に適用されますが、
<link rel="stylesheet" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">
meta要素を加えて次のように指定すると、代替スタイルの方が優先的に適用されることになります。
<meta http-equiv="default-style" content="代替スタイル">
<link rel="stylesheet" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">
使用例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="default-style" content="スタイル2（緑）">
<title>デフォルトスタイルの指定例</title>
<style>
h1 { font-size: 150%; }
</style>
<style title="スタイル1（赤）">
h1 { color: #ff5555; }
</style>
<style title="スタイル2（緑）">
h1 { color: #00d500; }
</style>
<style title="スタイル3（青）">
h1 { color: #2b95ff; }
</style>
</head>
<body>
<h1>デフォルトスタイルの指定例</h1>
<p>対応しているブラウザでは、「スタイル2（緑）」が既定のスタイルシートとなります。ブラウザの操作によって、使用するスタイルシートを切り替えることができます。</p>
...
</body>
</html>
- 表示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="default-style" content="代替スタイル">
<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>
...
</body>
</html>
- 表示例
- noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、既定スタイルの変更が適用されます。
<!DOCTYPE html>
<html>
<head>
<noscript>
<meta http-equiv="default-style" content="代替スタイル">
</noscript>
<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>
<p>どちらの場合も、ブラウザの操作によって使用するスタイルシートを切り替えることができます。</p>
...
</body>
</html>
- 表示例