ホームページ作成

【ホームページ作成】スタイルシートを切り替えられる機能を作る

装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

更新日：2007年07月11日

スタイルシートを切り替えられる機能を作る

西村文宏

複数のスタイルシートを用意しておき、閲覧者がプルダウンメニューを使って自由に切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変更できます。

ソースのまとめ

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

まず、HTMLのhead要素内（<head>～</head>部分）に、外部スタイルシートを読み込む記述と、スタイルシートを切り替えるJavaScriptを記述します。

<script type="text/javascript"><!--

   function changesytle(cssfile) {

      document.getElementById('mystyle').href = cssfile;

   }

// --></script>

link要素のid属性の値「mystyle」と、JavaScriptソース内の「mystyle」の記述は同じにしなければなりません。変更する際は、両方を変更して下さい。

次に、HTMLのbody要素内（<body>～</body>）に、切り替えるプルダウンメニューを記述します。

スタイルの変更：

<select onchange="changesytle(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>

以上です。

おわりに

今回は、ページ中で読み込んでいるスタイルシートファイルを自由に切り替える機能の作り方をご紹介いたしました。複数のページデザインをユーザが切り替えられるようにしたい場合などにご活用下さい。

【関連記事】

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！