スタイルの切り替え

それぞれ独立したスタイルシートを複数用意し、利用者に好きなものを選択させることができる。

代替スタイルシート

link 要素による外部ファイルのスタイルシート指定には、

固定スタイルシート(persistent style sheet)
優先スタイルシート(preferred style sheet)
代替スタイルシート(alternate style sheet)

の3つがある。固定スタイルシートは必ず適用されるスタイルシートでこれまで利用してきたlinkによる指定がそれにあたる。

優先スタイルシートと代替スタイルシートは、利用者が追加で適用させることを選択できるスタイルシートで、優先スタイルシートはデフォルトで、代替スタイルシートは利用者が明示的に指定することで追加適用される。

特定のCSSファイルを、上記3つのどれに位置付けるかは link 要素の各属性設定を以下のように設定することで決める。

固定スタイルシート: rel="stylesheet" にし、title属性を指定しない
優先スタイルシート: rel="stylesheet" にし、title属性を指定する
代替スタイルシート: rel="alternate stylesheet" にし、 title属性を指定する

たとえば、以下のような構成を取る場合を考える。

固定スタイルを base.css に(例: h1をセンタリング)
優先スタイルを spring.css に(例: 背景を桜色、文字を緑)
代替スタイルを summer.css に(例: 背景を群青、文字を白)

これを利用する文書ファイルは次のようになる。

altex.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Alternate Stylesheet Example</title>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" title="spring" href="spring.css">
<link rel="alternate stylesheet"
	type="text/css" title="summer" href="summer.css">
</head>

<body>
<h1>ようこそ</h1>
<p>こんにちは</p>
</body>

代替スタイルシート対応しているユーザエージェントからは、「view」→「style」などのメニューから切り替えが可能となる。

もちろんこの機能も、切り替え非対応ユーザエージェントのことを考慮し、代替スタイルシートに切り替えられなくても提供する情報に欠落がないように心掛けることが重要である。

メディア型指定

linkで指定するスタイルシートファイルもメディア型に応じた選択指定ができる。これには link 要素の media 属性を用いる。たとえば

<link rel="stylesheet" type="text/css" href="print.css" media="print">

とすると、印刷出力のときのみ print.css を読み込む。

yuuji@koeki-u.ac.jp