代替スタイルシート (alternate stylesheet) の設定方法

代替スタイルシートとは、ユーザーに任意のスタイルシートを選択できる機能を提供するものです。これによりユーザーは、好みの表示スタイルでページを閲覧できるようになります。

導入方法

link要素のrel属性にalternate stylesheetと記述します。そしてtitle属性で代替スタイルシートの名前を設定します。この属性がないとスタイルシートの選択ができないため、title属性は必須です。

<link rel="alternate stylesheet" type="text/css"
    href="style.css" title="代替" />

ブラウザでの代替スタイルシートの選択

たとえばInternet Explorerでは、


スタイルシートの選択メニュー (IE8)

のようにして選択できます。このページにも代替スタイルシートを設定してありますので、お使いのブラウザの方法に従ってご確認ください。

ブラウザごとの対応状況

代替スタイルシートの選択は、すべてのブラウザがサポートしているわけではありません。

ブラウザ 対応
Internet Explorer ※1
Mozilla Firefox
Google Chrome ×
Safari ×
Opera
※1 IE8以降

非対応のブラウザに対しては、JavaScriptからCSSを制御することで対応できます。