<link rel="stylesheet" href="" title="">

ブラウザ
  • IE
  • Fx
  • O
分類 メタデータ・コンテンツ
利用場所 メタデータ・コンテンツが置ける場所 / head要素の子要素となるnoscript要素
内容

link要素(外部スタイルシートを読み込む)に以下の設定を行うと、スタイルシートを固定スタイルシート優先スタイルシート代替スタイルシートに分類することができます。

この設定を行うと、対応しているブラウザでは優先代替のスタイルシートを切り替えられるようになります。


<link rel="stylesheet" href="common.css">

<link rel="stylesheet" href="basic.css" title="優先スタイル">

<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">

属性
必須属性
rel="" 現在の文書から見たリンク先の関係 stylesheet スタイルシートのリンクタイプを指定
href="" リンク先の指定 URL 読み込むスタイルシートファイルを指定
グローバル属性(この要素上では、title属性が特別な意味を持ちます)
title="" リンク先のタイトル 文字列 スタイルシートの名前を指定

3タイプのスタイルシート

以下の方法で、スタイルシートを3つのタイプに分類することができます。

固定スタイルシート
<link rel="stylesheet" href="common.css">

rel属性の値をstylesheetにし、かつtitle属性を指定しないようにします。(通常の指定方法です)

このタイプのスタイルシートは、常に適用されることになります。

優先スタイルシート
<link rel="stylesheet" href="basic.css" title="優先スタイル">

rel属性の値をstylesheetにし、かつtitle属性でスタイル名を指定します。

このタイプのスタイルシートは、固定スタイルシートと共に優先的に適用されることになります。

代替スタイルシート
<link rel="stylesheet alternate" href="alt.css" title="代替スタイル">

rel属性の値をstylesheet alternateにし、かつtitle属性でスタイル名を指定します。

このタイプのスタイルシートは、通常は適用されません。ブラウザの操作で切り替えた場合に、優先スタイルシートの代わりとしてこのスタイルシートが適用されることになります。

スタイルシートのグループ化

同じスタイル名を持たせることによって、複数のスタイルシートをグループ化することができます。

<link rel="stylesheet" href="common.css">

<link rel="stylesheet" href="basic1.css" title="優先スタイル">
<link rel="stylesheet" href="basic2.css" title="優先スタイル">

<link rel="stylesheet alternate" href="alt1.css" title="代替スタイル">
<link rel="stylesheet alternate" href="alt2.css" title="代替スタイル">

上記の場合は、優先スタイルというスタイル名によってbasic1.cssbasic2.cssを、代替スタイルというスタイル名によってalt1.cssalt2.cssをグループ化しています。

  • グループ単位でスタイルが適用されることになります。

スタイルシートの切り替え方法

例えばFirefoxの場合は、表示スタイルシート の操作でスタイルシートを切り替えることができます。

メニューを選択していくと、スタイルを選択できる項目が表示されます。

title属性の値が、このメニュー内に表示されることになります。

使用例


<!DOCTYPE html>
<html>
<head>

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

<h2>固定スタイルの内容(common.css)</h2>

...

</body>
</html>

表示例

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