Website Options の詳しい使い方

Top
Rd
LS
TS

Website Options の詳しい使い方

スタイルシートに関して
出力する HTML のサンプル
CSS サンプル
配布ページに戻る

スタイルシートに関して

永続/優先/代替スタイルシート

永続スタイルシート(固定スタイルシート)

<link rel="stylesheet" href="persistent.css" type="text/css">
<?xml-stylesheet href="persistent.css" type="text/css"?>

title 属性が無いものは永続スタイルシートとなります。通常、ユーザーが特に何もしない限り有効で、スタイル切り替えの対象にはなりません。常に有効です。

優先スタイルシート

<link rel="stylesheet" title="Default Style" href="preferred.css" type="text/css">
<?xml-stylesheet title="Default Style" href="preferred.css" type="text/css"?>

title 属性があるものは優先スタイルシートとなります。通常、ユーザーが特に何もしない限り有効で、スタイル切り替えの対象となります。

代替スタイルシート

<link rel="alternate stylesheet" title="Sub Style" href="alternate.css" type="text/css">
<?xml-stylesheet alternate="yes" title="Sub Style" href="alternate.css" type="text/css"?>

title 属性があり、尚且つ alternate 指定がされているものは代替スタイルシートになります。通常、ユーザーが明示的に指定しない限り無効で、スタイル切り替えの対象になります。

記述方法

xml-stylesheet 処理命令は html 要素が文書で出現するより前に書かれていなければ意味がありません。また、文書をスタイルシートと関連付ける link 要素は head 要素内に書かれていなければ不正です。下記は正しくスタイルシートと関連付けた XHTML/1.1 文書の一例です。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?xml-stylesheet href="/simple.css" type="text/css" title="Simple" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<title>サンプル</title>
	<link rel="stylesheet" href="/simple.css" title="Simple" type="text/css" />
</head>
<body>
<h1>サンプル</h1>
<p>これはサンプルです。</p>
</body>
</html>

注意点

xml-stylesheet 処理命令で関連付けたスタイルシートを Website Options で切り替えられるようにするには、 application/xhtml+xml として文書が送信される必要があります。 text/html で文書が送信される場合、認識できるのは link 要素で関連付けたスタイルシートのみです。 IE は application/xhtml+xml で文書が送信されても表示が出来ない点に注意してください。

Opera 対応のジレンマ

とりあえずの対応

結論だけ書くと Opera でも正常に動作させるには下記の3点を守ればよいです。普通の HTML であれば、特に気にする必要はありません。

xml-stylesheet 処理命令を書かない
link 要素でスタイルシートの指定を行う
スクリプト設定の "XHTML & Opera の組み合わせでもスタイル切り替え機能を使う" を有効にする

理由

Opera 等の styleSheets オブジェクトが存在しないブラウザでは、 xml-stylesheet 処理命令で関連付けたスタイルシートをスクリプトから操作する事が出来ません。少なくとも Opera 7.5 以上 8.5 以下では処理命令は対応していても、スクリプトでの操作の手段がないので、まともにスタイルシート切り替えが行えません。

XHTML 文書がこのメディア型 (引用注: application/xhtml+xml ) で提供される場合、スタイルシートを利用する際には、制作者は xml-stylesheet 処理命令 [XMLstyle] を記述すべきである。

と XHTML Media Types (3.2) で定められているので、仕様に従うなら書いた方が良いのです。但し、Opera でもスタイル切り替えに対応させたい場合は link 要素だけの表記にした方が無難でしょう。Opera 側が対応するのをひたすら待つ手もあります。

因みに、3.3.4 以降であれば、このスクリプト自身に『XHTML & Opera の組み合わせでもスタイル切り替え機能を使うか』の設定があります（初期値は『使わない』です）。 HTML である場合は、そもそも link 要素だけしか書けないので、このようなジレンマは起こりません。

出力する HTML のサンプル

Website Options はスタイルシート切り替え機能とリンク先ウィンドウ切り替え機能を使う時に、 div 要素を自動生成します。その div 要素を追加する位置は、設定で自由に変更する事が出来ます。ここではスタイルシート切り替え機能を使った際の、設定ごとの出力例を挙げます。ここでの追加対象は全て元の HTML の div 要素です。

元の HTML (一部)

<div>
<h1>サンプル</h1>
<p>テキスト、テキスト、テキスト……</p>
</div>

要素の前に追加する & 要素の外に追加する

<div id="WOSSS">
<label for="WOSSSBOX">テーマ </label>
<select id="WOSSSBOX">
<option class="enable">メインスタイル</option>
<option class="disable">代替スタイル</option>
<option class="disable">なし</option>
</select>
</div>
<div>
<h1>サンプル</h1>
<p>テキスト、テキスト、テキスト……</p>
</div>

要素の前に追加する & 要素の中に追加する

<div>
<div id="WOSSS">
<label for="WOSSSBOX">テーマ </label>
<select id="WOSSSBOX">
<option class="enable">メインスタイル</option>
<option class="disable">代替スタイル</option>
<option class="disable">なし</option>
</select>
</div>
<h1>サンプル</h1>
<p>テキスト、テキスト、テキスト……</p>
</div>

要素の後に追加する & 要素の外に追加する

<div>
<h1>サンプル</h1>
<p>テキスト、テキスト、テキスト……</p>
</div>
<div id="WOSSS">
<label for="WOSSSBOX">テーマ </label>
<select id="WOSSSBOX">
<option class="enable">メインスタイル</option>
<option class="disable">代替スタイル</option>
<option class="disable">なし</option>
</select>
</div>

要素の後に追加する & 要素の中に追加する

<div>
<h1>サンプル</h1>
<p>テキスト、テキスト、テキスト……</p>
<div id="WOSSS">
<label for="WOSSSBOX">テーマ </label>
<select id="WOSSSBOX">
<option class="enable">メインスタイル</option>
<option class="disable">代替スタイル</option>
<option class="disable">なし</option>
</select>
</div>
</div>

サンプル CSS

サンプルとしてお薦めのスタイルシートの設定例を下記に挙げておきます。デフォルトのままではややきつい感じなので、少し余裕を持たせてバランスをよくしたものです。

#WOSWITCH,
#WOSSS	{
	padding:5px;
	}

#WOSWITCH *,
#WOSSS *	{
	vertical-align:middle;
	letter-spacing:0;
	}

#WOSWITCH input,
#WOSSS label	{
	margin-right:0.5em;
	}

#WOSSS option	{
	width:8em;
	}