Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。
じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。
- サンプルはこちらで確認できます
- 全ファイルのダウンロードはこちら （zip ファイル / 10KB）
デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択したものに切り替わり、その設定はCookie によって保存されますので、Cookie をクリアしない限り、次にアクセスしたときも最後に選択したレイアウトが維持されます。この切り替えは、以前にも 「12 のレイアウトを切替可能なテンプレート」 などで使用している、A List Apart さんの 「styleswitcher.js」 を使用しています。
CSS 切り替えスイッチのデザイン、どこかで見たことあるなと思った人...... そうです、iTunes リスペクトでデザインしてみました。
それでは簡単に使い方など。
ファイルをダウンロードして解凍すると下記のようなフォルダ構成になっています。
- index.html （サンプル XHTML）
- css （CSS ファイル格納フォルダ）
- css_switch.css （CSS スイッチ用スタイル）
- fixed.css （固定レイアウト用スタイル）
- liquid.css （リキッドレイアウト用スタイル）
- elastic.css （エラスティックレイアウト用スタイル）
- base.css （サンプル用スタイル）
- img （画像ファイル格納フォルダ）
- CSS スイッチの画像が数点
- js （JavaScript ファイル格納フォルダ）
- css_switch.js
基本的には、img、js、css の各フォルダをそのままサーバにアップして、次にスイッチを設置するページの任意の場所に、サンプル XHTML ファイルから、下記のソースをコピー & ペーストします。
<ul id="css_switch">
<li class="fixed"><a href="javascript:void(0);" onclick="setActiveStyleSheet(''); return false;" onkeypress="setActiveStyleSheet(''); return false;" title="Fixed Layout">Fixed Layout</a></li>
<li class="liquid"><a href="javascript:void(0);" onclick="setActiveStyleSheet('Liquid Layout'); return false;" onkeypress="setActiveStyleSheet('Liquid Layout'); return false;" title="Liquid Layout">Liquid Layout</a></li>
<li class="elastic"><a href="javascript:void(0);" onclick="setActiveStyleSheet('Elastic Layout'); return false;" onkeypress="setActiveStyleSheet('Elastic Layout'); return false;" title="Elastic Layout">Elastic Layout</a></li>
</ul>
次に、同じページの <head> ～ </head> に、下記のソースを挿入。
<link rel="stylesheet" href="css/css_switch.css" type="text/css" media="screen, tv, projection" /> <link rel="stylesheet" href="css/fixed.css" type="text/css" media="screen, tv, projection" /> <link rel="alternate stylesheet" href="css/liquid.css" type="text/css" media="screen, tv, projection" title="Liquid Layout" /> <link rel="alternate stylesheet" href="css/elastic.css" type="text/css" media="screen, tv, projection" title="Elastic Layout" /> <script type="text/javascript" src="js/css_switch.js"></script>
各ファイルへのパスは、アップロードした場所に合わせて調整、スタイルシートの media 属性は適当に調整してください。
あとは、下記の CSS ファイルを自分のサイトに合わせて書き直してあげてください。
- fixed.css （固定レイアウト用スタイル）
- liquid.css （リキッドレイアウト用スタイル）
- elastic.css （エラスティックレイアウト用スタイル）
ただし、各 CSS ファイルの、
/*---------------------------------------- __CSS_switch ----------------------------------------*/
から下の部分は消さないでください。ここでスイッチの選択状態を表現していますので。
今回のサンプルでは、可変レイアウト選択時、メインのカラムのみが可変するようにしていたり、リキッドレイアウトで必要以上に横幅が大きくなったり、狭くなりすぎたり、エラスティックレイアウトでウィンドウサイズより横幅が大きくなってしまわないしないように、max-width、min-width を指定したり （IE じゃ意味ないですけど） していますが、この辺はお好みで。
動作確認は下記のブラウザで行っています。JavaScript が有効になっている必要があります。その他のブラウザではどうなるか知りません。
- Windows IE6 / IE7
- Windows Firefox 2
- Windows Opera 9
- Mac Safari 2
- Mac Firefox 2
利用に関してですが、XHTML と CSS は当サイトで制作したオリジナルなので、利用に関して特に制約はありません。ウチで配布している旨さえ明記してもらえれば再配布して頂いてもかまいません。ただし、JavaScript ファイルに関してはオリジナルの制作者がいらっしゃいますので改変や再配布の際は各スクリプトの利用規約を確認してください。
