[2006/05/13] Style Sheet Switcher

リンククリックで読み込むスタイルシートを切り替える Java スクリプトです。当サイトで以前使用していました。(2006/05/30 このページの PV が多いので、サンプルスクリプトを加筆)

【出典】 Alternative Style: Working With Alternate Style Sheets: A List Apart

【作者】 Paul Sowden

【ダウンロード】 A List Apart (styleswitcher.js / 1,840 Byte)

スタイルシートはいくつでも切り替えることが出来るので、ユーザーに好みのインターフェースを選択してもらえるような全く違うデザインのスタイルシートを何種類も用意するのも楽しい使い方ですが、その他 wired.com のように、単に全体の文字サイズを変更するという使い方もアクセシブルでよろしいと思います。

設定方法

• 1. Java スクリプトファイル styleswitcher.js を Web サーバの任意のディレクトリに保存します。スクリプトを編集する必要はありません。

  2. スタイルシートを複数点用意し、Web サーバの任意のディレクトリに保存します。(ここでは 3 点用意したものとして説明します)

  3. タグ内にスクリプトを呼び出すための次のソースを挿入します。

     1. <script type="text/javascript" src="./任意のディレクトリ/styleswitcher.js"></script>

  4. タグ内にスタイルシートを呼び出すための次のソースを挿入します。デフォルトにしたいスタイルの rel 属性は stylesheet、代替として扱うスタイルには alternate stylesheet を指定します。

• • 1. <link rel="stylesheet" type="text/css" href="../style/default.css" title="A">

    2. <link rel="alternate stylesheet" type="text/css" href="../style/sub1.css" title="B">

    3. <link rel="alternate stylesheet" type="text/css" href="../style/sub2.css" title="C">

• 5. title の値は任意です。ここではそれぞれ A・B・C としました。この値がスタイルシートを選り分けする ID になると考えて下さい。

  6. タグ内にスタイルシート切り替えボタンとなるリンクアンカーを記述します。

• • 1. <a href="#" onclick="setActiveStyleSheet('A'); return false;" title="スタイルシート切り替えボタン">スタイル A</a>

    2. <a href="#" onclick="setActiveStyleSheet('B'); return false;" title="スタイルシート切り替えボタン">スタイル B</a>

    3. <a href="#" onclick="setActiveStyleSheet('C'); return false;" title="スタイルシート切り替えボタン">スタイル C</a>

※ この CSS 切り替えアンカーは、ページ間のリンクではないことを示すために、title でスタイルシートの切り替えボタンであることを表現しておくと親切かもしれません。

さらに詳しい情報は、出典元 Alternative Style: Working With Alternate Style Sheets: A List Apart (英語) をご覧下さい。