Home > Webデザイン > スタイルシート切り替えスクリプトを設置

スタイルシート切り替えスクリプトを設置

2007-03-01 (木)
Webデザイン

代替スタイルシートを利用することで訪問者にスタイルを選択させることが出来ます。Firefoxなどの比較的新しいブラウザでは、ブラウザ側で代替スタイルシートの選択が可能なのですが、トップシェアのIEでは、ブラウザ側で代替スタイルシートの選択は行えません。~~そこで、JavaScriptでCSS切替が出来るスクリプトを導入してみました。~~現在、このブログには導入していません。

個人的に、同じスタイルシートを使い続けることが出来ない性格なので、ころころとスタイルシートを模様替えしています。けれど、手塩に掛けて作ったスタイルシート達をそのままお蔵入りさせてしまうのは勿体無いと思い、代替スタイルシートを導入するに至りました。

今回利用させて頂いたスクリプトは、徒委記の「CSS切替スクリプト」です。

導入方法は、リンク先を見て貰うとして、代替スタイルシートの導入についてのお話を少々。

代替スタイルシートの記述方法

前述したとおり、Firefoxなどのモダンブラウザでは、JavaScriptなどを使わずに、HTMLにスタイルシートへのリンクを記述するだけで代替スタイルシートの選択が可能になります。ルールは以下の通りです。

固定スタイルシート

固定スタイルシートとは、必ず適用されるスタイルシートのことで、優先スタイルシートや代替スタイルシートを読み込んだ場合にも固定スタイルシートの情報が適用されます。

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

rel属性(rel)がstylesheetで、タイトル属性(title)が未設定ならば、固定スタイルシートとして必ず読み込まれます。

優先スタイルシート

優先スタイルシートとは、優先的に適用されるスタイルシートのことで、訪問者が最初に閲覧した際に適用されます。訪問者が、代替スタイルシートを選択した場合は、優先スタイルシートは読み込まれません。

<link rel="stylesheet" type="text/css" href="b.css" title="b" />

rel属性(rel)がstylesheetで、タイトル属性(title)が設定されていれば、優先スタイルシートとして読み込まれます。

代替スタイルシート

代替スタイルシートは、訪問者がブラウザ等で選択した場合に読み込まれます。

<link rel="alternate stylesheet" type="text/css" href="c.css" title="c" />

rel属性(rel)がalternate stylesheetで、タイトル属性(title)が設定されていれば、代替スタイルシートとして読み込まれます。

何のための代替スタイルシートか？

アクセシビリティを考慮したWebサイトでは、文字の大きさを代替スタイルシートで変更するといった使われ方をされています。それが代替スタイルシートの本来の姿なのかもしれませんが、当ブログの場合は、CSSで色々な表現が出来るんです、ということを実際に見せるために代替スタイルシートを導入しています（これから代替スタイルシートが増える予定です。あと共有テンプレートも…^^;）。

CSSでデザインを変更して、いくら素敵なデザインのサイトを作ったとしても、書かれている内容の価値が上がるわけではありません。ただ、css Zen Gardenのように、CSSをWebデザインの表現方法として評価する考え方があることも事実です。

css Zen Garden