以前、お話したCSSをフォームで切り替えるスクリプトです。


// CSS変換スクリプト(head部/クッキー使用)
dfcss = document.cookie +";";
sp = dfcss.indexOf("mycss",0);
mycss = dfcss.substring(sp + 6,dfcss.indexOf(";",sp));
if (dfcss == ";") { mycss = "none"; }
if ( mycss != "none" ) {
document.write('');
}
function CSSSelect(form, sel) {
c = sel.selectedIndex;
CSSname = sel.options[c].value;
document.cookie = "mycss=" + CSSname + ";expires=Fri, 31-Dec-2030 23:59:59; ";
location.reload();
}


// CSS変換スクリプト(Form部)
document.write('<form name="cssform"><small>※見やすく設定してください(クッキー対応)</small><br />');
document.write('<select name="csssel">');
document.write('<option value="tate">縦置きデザイン</option>');
document.write('<option value="yoko">横置きデザイン</option>');
document.write('<option value="ns4">NetScape4.X用(不完全)</option>');
document.write('<option value="none">スタイルシートなし</option></select>');
document.write('<input type="button" value="変更" onClick="CSSSelect(this.form, csssel)">');
document.write('</form>');


■設定方法

1. クッキーとJavascriptを使います。
2. 上記スクリプトをそれぞれHEAD部とBODY内のフォームの入る位置に配置、リンク可
3. CSSフォルダを対象のHTMLファイルと同じディレクトリに配置。
4. CSSフォルダ内に、各CSSファイル(ここではtate.css等)を置く。

■解説

□head部スクリプト
1行目:クッキー読み込み
2〜3行目:クッキーから必要な情報を取り出す
4行目:クッキーが空だったときの処理
5〜7行目:クッキーを元にスタイルシートへのリンクタグを書き出す
8行目:CSSSelect()の定義
9行目:選択したオプション番号を取得
10行目:その内容を取得
11行目:クッキーにデータを書き込む(expiresは有効期限)
12行目:ページをリロードする
13行目:CSSSelect()の終了

□フォーム部スクリプト
Javascript非対応ブラウザで閲覧したときに、無駄なフォームを表示させたくなかったのでJavascript化しました。
[変更]をクリックするとCSSSelect()が実行されます。

□実際の動作時の流れ
1.プルダウンを選択し、変更をクリック。
2.クッキーに選択した情報が書き込まれる。
3.書き込まれたクッキーから必要な情報を取り出す。
4.取り出した情報を元にスタイルシートタグを書き出す。
5.クッキーが残っている限り常に同じデザインになる。

一応、クッキー、HTML、Javascriptを使った
Ajax風プログラムになっているような気がしますが、
いかがでしょうか?