閲覧者がスタイルシートを切り替えられる機能を作る(2ページ目)

切り替え対象のスタイルシートの読み込み準備

CSS(スタイルシート)ファイルは、HTMLソース内にlink要素を使って記述することで読み込めます。たとえば、以下のような感じで記述します。

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

上記では、href属性の値に指定した「style.css」というCSSファイルを読み込んでいます。このhref属性の値をスクリプトで書き換えることで、読み込むCSSファイルを動的に変化させられます。

■CSSファイルを読み込んでいるlink要素に、id名を付加しておく
まず、先のlink要素に、id属性を使って名称を加えておきます。これは、後からJavaScriptで属性値を切り替えられるようにするためです。たとえば以下のように記述します。

<link rel="stylesheet" type="text/css"
      href="style.css" id="mystyle">

ここでは、「mystyle」というid名を加えました。この名称は何でも自由に付けて構いません。同一ページ内に存在する他のid属性値と重複しないようにだけ注意して下さい(同じid名は同一HTML内では1回しか使えない規則だからです)。

なお、ここで決定したid名は、次のページで作成する「CSSファイルの切り替え用プルダウンメニュー」を作るHTMLソースにも書く必要があります。もし、「mystyle」以外の名称に変更した場合は、後述のHTMLソースでも同様に変更することを忘れないようご注意下さい。

■切り替えるCSSファイルは、ここでは書かない
上記の例では、「style.css」というCSSファイルが「他のCSSファイルと置き換わる対象」になります。置き換わる候補のCSSファイル群については、ここでは記述しません。HTMLを使って作成するプルダウンメニュー内(次のページで解説)に記述します。

複数のCSSファイルを別々に切り替えられるようにしたい場合

1ページ内で同時に複数のCSSファイルを読み込んでいて、それぞれを別々に切り替えられるようにしたい場合は、それぞれ異なるid名を付加しておきます。たとえば、以下のように「apple」と「orange」など、異なる名称を記述します。

<link rel="stylesheet" type="text/css"
      href="ringo.css" id="apple">
<link rel="stylesheet" type="text/css"
      href="mikan.css" id="orange">

さて、上記の通り準備ができたら、次に、CSSファイルの変更候補を表示するための切り替え用プルダウンメニューをHTMLで記述します。