5/5 閲覧者がスタイルシートを切り替えられる機能を作る [ホームページ作成] All About

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

複数のCSS(スタイルシート)ファイルを用意しておき、閲覧者がプルダウンメニューを使って自由にスタイルを切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変えられます。好みのデザインを選択できるようにしたり、様々な配色で表示がどう変わるかを確認できるようにしたい場面などで便利です。

記述するソースのまとめ

今回のソースをまとめて掲載しておきます。

まず、HTMLのhead要素内(<head>～</head>内)に、CSSファイルを読み込む記述と、それを切り替えるJavaScriptを記述します。

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

<script type="text/javascript">
function changesytle(cssid,cssfile) {
   document.getElementById(cssid).href = cssfile;
}
</script>

次に、HTMLのbody要素内(<body>～</body>内)に、CSSファイルを切り替える候補を表示するためのプルダウンメニューを記述します。

スタイルの変更：
<select onchange="changesytle('mystyle',value);">
   <option value="style.css">標準スタイル</option>
   <option value="red.css">赤系スタイル</option>
   <option value="blue.css">青系スタイル</option>
   <option value="sea.css">海スタイル</option>
   <option value="">スタイルなし</option>
</select>

最初にlink要素に付加したid属性の値「mystyle」と、プルダウンメニューを作るselect要素内に記述した「mystyle」の記述は同じにしなければなりません。変更する際は、両方を同時に変更して下さい。

複数のCSSファイルを別々に変更できるように作る場合は、id名を変えて必要なだけコピーして(link要素とプルダウンメニューを)掲載して下さい。その場合でも、JavaScriptソースの記述は1回だけで十分です。切り替えたいCSSファイルがいくつあっても、呼び出すスクリプト(関数)は同じだからです。