JavaScriptでサイトの背景を時間に応じて変える方法

こんにちは、皆さん!今回はJavaScriptを使用して、アクセスする時間によってサイトの背景を朝から夜に変える方法をご紹介します。この方法を使えば、ユーザーに時間帯に応じた視覚的な体験を提供することができます。

手順

以下の手順に従って、HTML、CSS、JavaScriptを設定していきましょう。

HTMLの設定

まず、基本的なHTMLを用意します。この中に、背景を変更するためのdivタグと、外部CSSとJavaScriptファイルをリンクします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>時間に応じた背景変更</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="background"></div>
<script src="script.js"></script>
</body>
</html>

CSSの設定

次に、CSSを設定します。時間帯ごとに異なる背景色を定義するため、いくつかのクラスを作成します。

body, html {
margin: 0;
padding: 0;
height: 100%;
}

#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.morning {
background-color: #FFFAE6; /* 朝 */
}

.afternoon {
background-color: #FFE4B5; /* 昼 */
}

.evening {
background-color: #FFD700; /* 夕方 */
}

.night {
background-color: #2C3E50; /* 夜 */
}

JavaScriptの設定

最後に、JavaScriptを設定します。現在の時間を取得し、それに応じて適切なCSSクラスを#background要素に適用します。

document.addEventListener('DOMContentLoaded', function() {
var background = document.getElementById('background');
var now = new Date();
var hours = now.getHours();

if (hours >= 6 && hours < 12) {
// 朝 6:00 - 11:59
background.className = 'morning';
} else if (hours >= 12 && hours < 18) {
// 昼 12:00 - 17:59
background.className = 'afternoon';
} else if (hours >= 18 && hours < 21) {
// 夕方 18:00 - 20:59
background.className = 'evening';
} else {
// 夜 21:00 - 5:59
background.className = 'night';
}
});

まとめ

これで、アクセスする時間によってサイトの背景が変わるようになりました。
朝、昼、夕方、夜の4つの時間帯に応じて異なる背景色を表示することで、
ユーザーに時間帯に合った視覚的な体験を提供できます。
この方法を活用して、よりインタラクティブで魅力的なサイトを作成してみてください!

ぜひ、皆さんもこの方法を試してみてくださいね。それでは、次回の記事でお会いしましょう!