<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要素に設定された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="代替スタイル">

使用例

style要素で使用した例

<!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>

表示例

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

link要素で使用した例

<!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>

表示例

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

link要素で使用した例(noscript要素内)
  • 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>

表示例

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