現在の時刻をサイトで表示する方法

現在の時刻をリアルタイムで表示する方法について、HTML、CSS、そしてJavaScriptを使って解説します。このプロジェクトでは、シンプルなデジタル時計を作成し、現在の時刻を表示する方法を学びます。

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

1. プロジェクトの基本構成

まず、HTML、CSS、JavaScriptファイルを準備します。

HTML: `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Current Time Display</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="clock">
    <span id="time"></span>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS: `styles.css`

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #282c34;
  font-family: Arial, sans-serif;
}

.clock {
  color: #61dafb;
  font-size: 5rem;
  font-weight: bold;
}

JavaScript: `script.js`

function updateTime() {
  const timeElement = document.getElementById('time');
  const now = new Date();

  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  timeElement.textContent = `${hours}:${minutes}:${seconds}`;
}

// ページがロードされたら、すぐに時間を更新
updateTime();

// 毎秒、時間を更新
setInterval(updateTime, 1000);

2. 各コードの解説

1. HTML (`index.html`)

<div class="clock">: このdiv要素が時計の表示領域になります。
<span id="time">: このspanタグにJavaScriptで時間を挿入します。id属性を設定することで、JavaScriptでこの要素を簡単に操作できるようにしています。
<script src="script.js">: JavaScriptファイルを読み込むためのスクリプトタグです。ページの最後に配置することで、HTMLが完全に読み込まれた後にJavaScriptが実行されるようにしています。

2. CSS (`styles.css`)

body: body要素全体にスタイルを適用しています。display: flex;を使って中央揃えにし、時計が画面中央に配置されるようにしています。
.clock: 時計の文字色、フォントサイズ、太さを指定しています。#61dafbは、青色のカラートーンで、背景色の暗さと対比させています。

3. JavaScript (`script.js`)

updateTime関数: updateTime関数は、現在の時刻を取得し、画面に表示するための関数です。
- new Date(): 現在の日付と時刻を取得します。
- getHours()、getMinutes()、getSeconds(): それぞれ現在の「時」「分」「秒」を取得します。
- padStart(2, '0'): padStartメソッドは、文字列が2文字になるように先頭に’0’を追加します。これにより、例えば「9時」が「09」と表示されます。
- textContent: textContentプロパティを使って、span要素に現在の時間を表示します。
setInterval(updateTime, 1000): この関数は、updateTimeを1秒ごとに呼び出すためのタイマーを設定しています。これにより、時計がリアルタイムで更新されます。

3. 結果

このコードを実行すると、ブラウザにデジタル時計が表示され、1秒ごとに時間が更新されます。シンプルなデザインと、JavaScriptを使った動的な時間更新の仕組みを理解する良い例です。

4. 応用例

この基本的なデジタル時計に加えて、さらに発展させるために以下のアイデアがあります。

日時の表示: 現在の日付も一緒に表示する。
スタイルの変更: フォントや色、背景画像を変更して、見た目をカスタマイズする。
アナログ時計: HTML5 Canvasを使ってアナログ時計を作成する。

1. プロジェクトの基本構成

HTML: index.html

CSS: styles.css

JavaScript: script.js

2. 各コードの解説

1. HTML (index.html)

2. CSS (styles.css)

3. JavaScript (script.js)