【時間によってデザインを変える】(1998年9月号No.4)
アクセスした時間によって、表示されるメッセージや画像が変わるページをよく見かけるが、 ここではページ全体のデザインを変えてしまうTIPSを紹介しよう。 左のサンプルでは、ページデザインを3種類用意し、昼、夕方、夜中とアクセスした時間帯に合わせて変えてある。 ページ全体の色や、背景、リンクの色、そして中央にある画像が変わるのだ。 この仕掛けはスクリプトとスタイルシートで作ることになるが、いたって簡単なものだ。 一度覚えてしまえば、ページデザインを4つ以上に増やしたり、 月や日付によってデザインを変えたりするなどの応用が柔軟に利く。ぜひ挑戦してみよう。
QUESTION1とほとんど同じなので、変更したスタイルシートの部分だけソースを掲載します。
dFrameというIDを指定した部分(フォントサイズの変化する部分)のスタイルシートを次のように設定しています。
.frame { background-color:#CCFFFF; /* 背景色 */ height:400px; /* 枠の高さ 400ピクセル */ overflow:scroll /* 表示が枠よりもはみ出したときの処理 スクロールバーを表示 */ }