XHTML/CSS・トップ | CSS基礎知識・目次

●代替スタイルシートの作成

 ページ作者は代替(だいたい)スタイルシートを用意することにより、ユーザーに異なるスタイルを利用してもらうことができます。ユーザーはブラウザメニューバーの「表示」タブをクリックし、「スタイルシート」または「スタイル(を使用)」を選択して利用します。

Firefoxのブラウザの場合

【HTML】

<link rel="stylesheet" type="text/css" href="sample1.css">
<link rel="alternate stylesheet" type="text/css" title="代替スタイルシート" href="sample2.css">

【XHTML】

<link rel="stylesheet" type="text/css" href="sample1.css" />
<link rel="alternate stylesheet" type="text/css" title="代替スタイルシート" href="sample2.css" />

 上の“代替スタイルシート”の文字はページ作者が任意で付ける名前です。ブラウザメニューバーの「表示」→「スタイルシート」または「スタイル(を使用)」を選択するとサブメニューにその名前が表示されます。

【解説】

 代替スタイルシートを用意するとNetscape (v7.1)、Mozilla(v1.7.12)、Firefox(v1.5×)、Opera(v8.5×)、Safariなど、代替スタイルシートをサポートしているブラウザを利用していれば、ユーザーが選択することにより、異なるスタイルを利用してもらうことができます。ただし、ページを移動するごとにユーザーに代替スタイルシートを選択してもらわなければなりません。なお、ウィンドウズ版IE(v6.0、v7.0)は代替スタイルシートに対応していません。

 以下、XHTML環境で解説します。(link要素の最後に半角スペースひとつとスラッシュが常に入ることに注意してください。)

【link要素の種類】

<link rel="stylesheet" type="text/css" href="sample1.css" />
<link rel="stylesheet" type="text/css" title="優先スタイルシート" href="sample2css" />
<link rel="alternate stylesheet" type="text/css" title="代替スタイルシート" href="sample3.css" />

 スタイルシートが上記のファイル名だったとします。"sample1.css"の形のスタイルシートはデフォルトスタイルシートまたは固定スタイルシートと呼ばれ、常に適用された状態となります。一般的なスタイルシートを指定するlink要素はこの形です。 "sample2css"のようにtitle属性を付けると優先スタイルシートとなり、固定スタイルシートよりも優先されます。優先スタイルシートと固定スタイルシートの両方を用意した場合、ウィンドウズ環境でNetscape、Mozillaブラウザは固定スタイルシートをユーザーが選択可能ですが、Firefox、Operaのブラウザでは固定スタイルシートを選択することができません。常に優先スタイルシートが適用された状態となります。"sample3.css"のようにrel="alternate stylesheet"の形にするとユーザーが選択することにより、代替スタイルシートとして利用してもらうことが可能です。今のところ、ウィンドウズ版IE(v6.0、v7.0)がスタイルシートの切り替えに対応していないのとすべてのブラウザにおいて、ページ移動のたびにユーザーが代替スタイルシートを選択する必要があります。

XHTML/CSS・目次 | CSS基礎知識・目次

CopCopyright (C) 2006-2008 http://www.xml.vc/