CSSの切り替え

ここでは、Javascriptを使ったCSSの切り替え方を解説します。
JavaScriptを使ったCSSの切り替えのテクニックは結構有名ですので、おぼえておいても損はしないと思います。
ここでは「A List Apart」というサイト(英語)でフリーで配布されている「styleswitcher.js」というスクリプトを使用します。
一番下の近くに”Download styleswitcher.js”という項目があるので、それをクリックしてダウンロードしてください。

CSS切り替え作成の流れ

1.代替CSSを用意する
まずは、デフォルトで使用しているCSSに変更したいものを上書きする。デフォルトのCSSをコピーした場合には不必要なものは全て削除しておきましょう。

2.CSSとstyleswitcher.jsをリンクさせる
head要素内に代替CSSと「styleswitcher.js」の読み込みを行うlink要素を追加する。
今回はデフォルトCSSを「default.css」に、代替CSSを「style1.css」というファイル名にしてあります。

HTML

[html]

<head>
<link rel="alternate stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" href="style1.css"<strong>title="alternate1"</strong> />
<script type="text/javascript" src="styleswitcher.js">
</head>

[/html]

※代替用のスタイルシートは、linkタグのrel属性を、”stylesheet”ではなく”alternate stylesheet“としてください。
※title属性に注意してください。これが、JavaScriptの動作するポイントになるので、title属性に適当な値を入れておきましょう。

3.ファンクションを記述する
本文中の適切な箇所に下記のようにファンクションを記述する。

HTML

[html]
<a href="#" onclick="setActiveStyleSheet(”); return false;">基本スタイル</a>
<a href="#" onclick="setActiveStyleSheet(‘alternate1’); return false;">代替スタイルその1に変更</a>

[/html]

クリックされると、linkタグのtitle属性の値が同じスタイルシートが適用されるようになります。

また、このスクリプトはクッキー機能がついていて、複数のページで同じスタイルシートを使っていると、読み込んだスタイルシートが反映されたままページ移動ができます。かなり便利なスクリプトだなぁと感動です。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください