あけましておめでとうございます。新年最初のエントリーはプルダウンメニューで画面表示用、プリント用など、出力メディアタイプ別に CSS を簡単に切り替えられるスクリプトの紹介。元ネタは 「A List Apart」 から。
まずは、どんな感じになるのかというサンプルから。A List Apart サイト内にサンプルページが用意されていますが、今回はこの記事の解説用にサンプルページを用意してみました。
サンプルページ上部のメニューから、モニター表示時のスタイル、プリント時のスタイル、さらにプロジェクター使用時のスタイルをそれぞれ選択できます。もちろん、選んだ設定は Cookie で保存されるので、次回訪れた際も同じスタイルが維持されます。
ちなみに、プロジェクター使用時のスタイルはプロジェクターがなくても、Opera のフルスクリーンモード （F11） で確認できます。
それでは以下解説。
まず必要なのが、下記の3つになります。
- CSS 切り替え用 JavaScript ファイル
- 各メディアタイプ別 CSS
- 切替プルダウンメニュー表示用の (X)HTML ソース
で、一応上記の材料一式は下記にすべてまとめて置いてありますのでよろしければどうぞ。
※上記に含まれる JavaScript は A List Apart で公開されているものの再配布ですが、スクリプト自体は 「Creative Commons Attribution-NonCommercial-NoDerivs」 でライセンスされているため、一切改変は加えていません。元のソースはこちらにあります。
導入の手順ですが、まずは JavaScript 及び CSS ファイルをサーバにアップし、CSS 切り替え機能を導入したいページに読み込みます。
<link rel="stylesheet" href="sample.css" type="text/css" /> <script src="css_switching.js" type="text/javascript"></script>
こんな感じ。
次に、 (X)HTML ソースに、下記のソースを追加します。
<div id="screen-switcher"></div> <div id="print-switcher"></div> <div id="projection-switcher"></div>
空の div 要素を 3つ追加。こうすることで、JavaScript がここにプルダウンメニューを書き出してくれます。これで完成。とっても簡単ですね。
さて、ここからはカスタマイズ編。
まず、表示する切り替えメニューにはモニター表示用と、プリント用だけでいい、つまりプロジェクター用なんていりませんという時は、上で (X)HTML ソースに加えた div 要素を減らしてあげます。
<div id="screen-switcher"></div> <div id="print-switcher"></div>
一番下の 1行を削除すれば OK。ただし、一点注意しないといけないのが、
<!--<div id="screen-switcher"></div>--> <div id="print-switcher"></div> <div id="projection-switcher"></div>
上記や下記のように先頭や途中の div 要素を消すと、そこから先が全部書き出されなくなること。
<div id="screen-switcher"></div> <!--<div id="print-switcher"></div>--> <div id="projection-switcher"></div>
そういう時はどうするかというと、JavaScript 内 CSS 切り替えメニュー書き出し用のコードから不要な部分をコメントアウトしてしまいます。
それがどこかというと、まず 20行目付近がモニター表示用、
//create a switcher form ('container-id', 'label')
var screenSwitcher = new bodySwitcher('screen-switcher', 'Screen styles');
//add a new class option ('classname', 'label')
screenSwitcher.defineClass('default', 'Normal contrast');
screenSwitcher.defineClass('high', 'High contrast');
screenSwitcher.defineClass('highvisibility', 'High visibility');
同じく、29行目付近がプリント用、
var printSwitcher = new bodySwitcher('print-switcher', 'Print styles');
printSwitcher.defineClass('default', 'Default');
printSwitcher.defineClass('small-sans', 'Small sans');
printSwitcher.defineClass('large-serif', 'Large serif');
35行目付近がプロジェクター表示用、
var projectionSwitcher = new bodySwitcher('projection-switcher', 'Projection styles');
projectionSwitcher.defineClass('default', 'Default');
projectionSwitcher.defineClass('fluid', 'Fluid layout');
となっていますので、例えば、モニター表示用が不要なら 20行目～ 26行目あたりを下記のように。
//create a switcher form ('container-id', 'label')
//var screenSwitcher = new bodySwitcher('screen-switcher', 'Screen styles');
//add a new class option ('classname', 'label')
//screenSwitcher.defineClass('default', 'Normal contrast');
//screenSwitcher.defineClass('high', 'High contrast');
//screenSwitcher.defineClass('highvisibility', 'High visibility');
逆に切り替えメニューを増やしたい時は、下記をテンプレとして、
var projectionSwitcher = new bodySwitcher('id_name', 'menu_name');
projectionSwitcher.defineClass('default', 'Default');
projectionSwitcher.defineClass('class_name_1', 'select_name_1');
projectionSwitcher.defineClass('class_name_2', 'select_name_2');
projectionSwitcher.defineClass('class_name_3', 'select_name_3');
「id_name」 に (X)HTML に追加する div 要素に付ける id 属性の値。
<div id="id_name"></div>
「menu_name」 にメニューの前に表示されるメニュータイトル、「class_name_n」 に CSS 切り替え用 class 属性の値、「select_name_n」 にセレクトメニュー内の選択枝の名前を入れてコードを追加します。そうすると、下記のような法則でプルダウンメニューが書き出されます。
<form action="">
<fieldset>
<label for="select-id_name">
<span>menu_name</span>
<select id="select-id_name">
<option value="class_name_1">select_name_1</option>
<option value="class_name_2">select_name_2</option>
<option value="class_name_3">select_name_3</option>
</select>
</label>
</fieldset>
</form>
JavaScript がわかる人は、これをベースに色々いじってみるもの面白いかもしれませんよ。
あと、メニュー表示用に空の div 要素を使うのが嫌だとか、書き出されるセレクトメニューのソースが気に入らないなんて時も JavaScript をいじって調整してみましょう。
