<meta http-equiv="default-style" content="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
分類 メタデータ・コンテンツ
利用場所 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" type="text/css" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" type="text/css" href="alt.css" title="代替スタイル">

meta要素を加えて次のように指定すると、代替スタイルの方が優先的に適用されることになります。

<meta http-equiv="default-style" content="代替スタイル">
<link rel="stylesheet" type="text/css" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" type="text/css" href="alt.css" title="代替スタイル">

使用例

style要素で使用した例
  • Firefoxで機能することを確認しました。
  • ChromeとSafariも対応しているようですが、スタイルを切り替えるメニューが見つかりませんでした。

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="default-style" content="スタイル2(緑)">

<title>デフォルトスタイルの指定例</title>

<style type="text/css">

h1 { font-size: 100%; }

</style>

<style type="text/css" title="スタイル1(赤)">

h1 { color: #ff5555; }

</style>

<style type="text/css" title="スタイル2(緑)">

h1 { color: #00d500; }

</style>

<style type="text/css" title="スタイル3(青)">

h1 { color: #2b95ff; }

</style>

</head>
<body>

<h1>デフォルトスタイルの指定例</h1>

<p>対応しているブラウザでは、「スタイル2(緑)」が既定のスタイルシートとなります。ブラウザの操作によって、使用するスタイルシートを切り替えることができます。</p>

...

</body>
</html>

表示例

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

link要素で使用した例
  • IEとFirefoxで機能することを確認しました。
  • ChromeとSafariも対応しているようですが、スタイルを切り替えるメニューが見つかりませんでした。

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="default-style" content="代替スタイル">

<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" type="text/css" href="alt.css" title="代替スタイル">

<title>デフォルトスタイルの指定例</title>

</head>
<body>

<h1>デフォルトスタイルの指定例</h1>

<p>対応しているブラウザでは、「代替スタイル」が既定のスタイルシートとなります。ブラウザの操作によって、使用するスタイルシートを切り替えることができます。</p>

...

</body>
</html>

表示例

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

link要素で使用した例(noscript要素内)
  • noscript要素内で使用すると、スクリプトを利用できないブラウザにのみ、既定スタイルの変更が適用されます。
  • noscript要素内で使用した場合は、IE(8)では正常に機能しないようです(スクリプトが有効であっても既定スタイルが変更されてしまいます)。IE(9以上)とFirefoxでは正常に機能しました。
  • ChromeとSafariも対応しているようですが、スタイルを切り替えるメニューが見つかりませんでした。

<!DOCTYPE html>
<html>
<head>

<noscript>
<meta http-equiv="default-style" content="代替スタイル">
</noscript>

<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="basic.css" title="優先スタイル">
<link rel="stylesheet alternate" type="text/css" href="alt.css" title="代替スタイル">

<title>デフォルトスタイルの指定例</title>

</head>
<body>

<h1>デフォルトスタイルの指定例</h1>

<p>通常は「優先スタイル」が既定のスタイルシートとなりますが、スクリプトを利用できないブラウザでは「代替スタイル」が既定のスタイルシートとなります。</p>

<p>どちらの場合も、ブラウザの操作によって、使用するスタイルシートを切り替えることができます。</p>

...

</body>
</html>

表示例

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