3/4 夜の間だけハロウィン仕様に変化させる [ホームページ作成] All About

時刻に応じて適用スタイルを変化させる

最後に、JavaScriptを用いて、時刻に応じて2つのスタイルシートファイルのどちらかが適用される仕組みを作ります。そのためには、次の2点の記述が必要です。

●外部スタイルシートファイルを読み込む記述
●時刻によって適用スタイルシートファイル名を切り替える記述

上記2点を順番にご紹介いたします。

外部スタイルシートファイルを読み込む記述

HTML中から外部のスタイルシートファイルを読み込むには、link要素を使って以下のように記述します。

<link rel="stylesheet" type="text/css" href="スタイルシートファイル名">

このスタイルシートファイル名をJavaScriptから変更できるようにするため、id属性を加えてID名を割り振っておきます。

<link rel="stylesheet" type="text/css" href="スタイルシートファイル名" id="ID名">

このようにすると、JavaScriptから適用スタイルシートを動的に変更できるようになります。
ここでは、ID名を「HalloweenCSS」とし、以下のように記述して下さい。
※記述場所はHTMLファイルのhead要素内（<head>～</head>内）です。

<link rel="stylesheet" type="text/css" href="normal.css" id="HalloweenCSS">

スタイルシートファイル名に「normal.css」を記述しているのは、JavaScriptが無効になっている環境では「normal.css」を適用させるためです。もし、ハロウィンデザインの方を適用させたいなら、ここは「halloween.css」を指定しておきましょう。

時刻によって適用スタイルシートを切り替える記述

次に、時刻によってスタイルシートファイル名を切り替えるJavaScriptを記述します。
記述場所はHTMLファイルのhead要素内（<head>～</head>内）で、先ほどのlink要素（外部スタイルシートファイルを呼び出す記述）の後に記述します。
※link要素よりも前に記述するとエラーが出ます。

<script type="text/javascript"><!--
   var nt = new Date();    // 現在時刻を取得
   var hr = nt.getHours(); // 「時」の値を取得
   if(( hr >= 20 ) || ( hr <= 4 )) {
      // 20時以降または4時以前の場合
      document.getElementById('HalloweenCSS').href = "halloween.css";
   }
   else {
      // それ以外の時刻の場合
      document.getElementById('HalloweenCSS').href = "normal.css";
   }
// --></script>

「HalloweenCSS」は、外部スタイルシートファイルを呼び出す記述（link要素）に付けたID名です。
上記のソースによって、20時台～4時台（＝20時00分～翌04時59分）の間は「halloween.css」が適用され、それ以外の時間帯では「normal.css」が適用されます。

適用時間帯を変更したい場合は、上記ソース中の「 hr >= 20 」や「 hr <= 4 」の数値を変更して下さい。（それぞれの意味は「20以上」と「4以下」です。）