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

スタイルシートをファイルごと切り替える

現在のページで読み込んでいる外部スタイルシートを、プルダウンメニューを使ってファイルごと切り替えてみましょう。 スタイルシートファイルそのものを動的に変更できるので、ページの装飾やレイアウトを大きく変更させることができます。

複数のページデザインを用意しておき、閲覧者の好みに応じて切り替えさせることなどに活用できるでしょう。

スタイルシートファイル動的変更サンプル

下記のプルダウンメニューを変更すると、読み込まれているスタイルシートファイルが変更され、下記ボックス内の装飾が変化します。 試しに変更させてみて下さい。
※JavaScriptが有効な場合のみ動作します。

上記では、以下のように装飾やレイアウトが変化するはずです。

■標準スタイル (default.css)
枠線は、灰色で幅3ピクセルの実線。背景色は淡い灰色。文字色は黒色。文字サイズは普通(100%)。行の高さは1.4倍。文字列は左寄せ。

■赤系スタイル (red.css)
枠線は、濃い赤色で幅2ピクセルの実線。背景色は淡い赤色。文字色は栗色(maroon)。文字サイズは1.4倍(140%)。行の高さは1.2倍。文字列は右寄せで斜体。

■青系スタイル (blue.css)
枠線は、濃い青色で幅1ピクセルの破線。背景色は淡い水色。文字色は暗い青色(darkblue)。文字サイズは0.9倍(90%)。行の高さは1.35倍。文字列はセンタリングで太字。

■海スタイル (sea.css)
枠線は、青色で幅4ピクセルの二重線。背景は海の画像。文字色は青色と白色。文字サイズは1.2倍(120%)。行の高さは1.7倍。文字列は左寄せで斜体。

■スタイルなし
スタイルシートの読み込みをやめるので、上記枠内のすべての装飾がなくなります。

ここでは、記事内でサンプルを示すため、一部分の装飾しか変更させていません。 しかし、読み込むスタイルシートファイルそのものを変化させているので、ページ全体の装飾やレイアウトなどを一気に変更させることも可能です。

切り替えは機能は わずか数行で作れる

このようなスタイルシートファイルの切り替えは、JavaScriptを3行記述するだけで実現できます。非常に簡単です。
JavaScriptのほかにHTMLでプルダウンメニューを作るので、3行の記述だけでできあがるわけではありませんが、全体の記述量はわずか数行です。

今回は、このように、読み込むスタイルシートファイルを動的に変化させる方法をご紹介いたします。

スタイルシートファイルを切り替える記述方法へ >>