olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascript、様々な効果を発揮するスクリプトサンプル設置方法

  1. Home>
  2. その他>
  3. CSS切り替え>
  4. スイッチボタンでCSSを変更する

CSS切り替えstyleswitcher.js

スイッチボタンでCSSを変更する

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSSを変更</title>
<script language="JavaScript" type="text/javascript" src="styleswitcher.js"></script>
<link rel="stylesheet" href="fontM.css" type="text/css" title="standard"/> 
<link rel="alternate stylesheet" href="fontB.css" type="text/css" title="alternate1"/> 
<link rel="alternate stylesheet" href="fontS.css" type="text/css" title="alternate2"/>
<noscript> 
 <link rel="stylesheet" href="fontM.css" type="text/css"/> 
</noscript>
<style>
*{margin:0; padding:0; background:none;}
body{font-family: Georgia, "Times New Roman", Times, serif; background-color:#FFF;}
ul{
  width:666px;
  height:222px;
  list-style:none;
}
ul li{
  width:222px;
  height:222px;
  float:left;
}
ul li a{
  width:222px;
  height:222px;
  text-align:center;
  vertical-align:middle;
  display:table-cell;
  _display:block;
  _line-height:222px;
  text-decoration:none;
}
</style>
</head>

<body>

<ul>
  <li class="small"><a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">Small</a></li> 
  <li class="middle"><a href="#" onclick="setActiveStyleSheet('standard'); return false;">Middle</a></li> 
  <li class="big"><a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">Big</a></li>
</ul>

</body>
</html>

スイッチボタンでCSSを変更することが可能なJavascript、styleswitcher.js。
うれしい機能として、変更した記録をクッキーに保存することで、
次回来訪したときや、ページをめくっている間も、ユーザーが選んだCSSを反映させることができる。
便利。 

ダウンロード

製作元のサイトへ行き、styleswitcher.jsをダウンロードしてくる。
ページ下部に、Download styleswitcher.jsというリンクがあるので、そこをクリック。
ダウンロードが始まる。

<head>~</head>の設定

大まかな流れとして、まずstyleswitcher.jsを読み込ませ、
次に、変更対象の複数のCSSファイルを設定しておく。

<script language="JavaScript" type="text/javascript" src="styleswitcher.js"></script> 

上記のようにスクリプトを読み込ませる。
次にCSSを<link>を使って読み込ませておく。

<link rel="stylesheet" href="fontM.css" type="text/css" title="standard"/>
<link rel="alternate stylesheet" href="fontB.css" type="text/css" title="alternate1"/>
<link rel="alternate stylesheet" href="fontS.css" type="text/css" title="alternate2"/> 

今回のサンプルでは、3つのCSSファイルを変更対象として設定している。
fontM.css、fontB.css、fontS.cssの3つがそれである。
一見見ると通常通りにCSSを読み込ませているので、上書きされあって機能しないのではないかと勘違いしそうだが、
そこはスクリプトと<link>内のtitleで制御している。

fontM.cssに設定されているtitleにはstandardと表記されている。
これは、デフォルトで設定しているCSSである、という意味。
次にfontB.cssとfontS.cssのtitle、alternate
この語尾に数字をつけることで、変更対象のCSSと定義している。
CSSファイルを増やしたい場合は、この記述をして語尾の数字を増やしていけばよい。

CSSの読み込み設定が終わったら、最後にJavascriptが機能しない場合に読み込むCSSファイルを定義しておく。
スクリプトが読み込まれないなら、fontM、fontB、fontSの順に上書きされてしまうので、
保険として<noscript>タグで最後の上書きの設定をしておく。

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

これで設定は完了する。

トリガーとなるボタンの設置

土台となる設定が完了したら、次はトリガーとなるボタン、スイッチを設定する。
ボタンといってもinputではなく、通常のリンクに設定することが出来る。
以下はサンプルのトリガーのソース。

<ul>
  <li class="small"><a href="#" onclick="setActiveStyleSheet('alternate2'); return false;" title="small"></a></li>
  <li class="middle"><a href="#" onclick="setActiveStyleSheet('standard'); return false;" title="middle"></a></li>
  <li class="big"><a href="#" onclick="setActiveStyleSheet('alternate1'); return false;" title="big"></a></li>
</ul>

トリガーとなるのは、onclickに設定されているsetActiveStyleSheet('')
このクォーテーションの間に、CSSのtitleに設定した値を入れる。
それが設定したCSSに変更するためのトリガーとなる。
classを設定しているのは、ボタンのビジュアルを変えて、今適用されているCSSをわかりやすくするため。
例えばfontM.cssが適用されている状態なら、fontM.cssにclass="middle"だけbig,smallとは異なる定義をする、ような感じ。

関連スクリプト

感想

ビジュアルを完全にCSSに依存するようにサイトを作れば、このスクリプトだけで、サイトの雰囲気をがらりと変更することができる。
もちろんビジュアル面だけにとどまらず、ユーザービリティを向上にも効果を発揮する。
レイアウトをユーザーの好みで選んでもらって、その設定でサイト内のコンテンツを閲覧してもらう。
通常モードは広告とかを設置しておいて、常連さん様に広告とかを極力少なくした設定も可能だし、
ベタなところで、フォントの大きさを変えられるボタンを設置したりとか。
超便利。

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。