コーディングで作る「アナログ時計」｜HTML・CSS・JavaScriptでリアルに動く時計を実装

10月 29, 2025 10月 29, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

今回は、Webサイトに「リアルなアナログ時計」を実装してみたい方に向けて、HTML・CSS・JavaScriptを使って動く時計をつくる方法を解説します。
JavaScriptのDate()オブジェクトを使えば、リアルタイムの時間を取得して針を動かすことが可能です。
CSSでデザインを整えることで、サイトのアクセントやローディング画面などにも応用できます。

HTML構造をつくる

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まずは時計の針と盤面を定義するHTMLです。
針を3つ（時針・分針・秒針）用意し、それぞれを中央に配置します。

<div class="clock">
  <div class="hand hour"></div>
  <div class="hand minute"></div>
  <div class="hand second"></div>
  <div class="center-dot"></div>
</div>

CSSでデザインを整える

盤面の見た目と針の長さ・回転軸を設定します。
中央の回転基点を保つために、針のtransform-originを下端に指定するのがポイントです。

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
}

.clock {
  position: relative;
  width: 250px;
  height: 250px;
  border: 8px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at center, #222 60%, #111);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 4px;
}

.hour {
  width: 6px;
  height: 60px;
  background: #fff;
}

.minute {
  width: 4px;
  height: 90px;
  background: #ccc;
}

.second {
  width: 2px;
  height: 110px;
  background: #ff5252;
}

.center-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ff5252;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScriptで針を動かす

setInterval()で毎秒更新し、Date()から現在時刻を取得して針を回転させます。
CSSのtransform: rotate()を使って動的に針を回す仕組みです。

function updateClock() {
  const now = new Date();
  const seconds = now.getSeconds();
  const minutes = now.getMinutes();
  const hours = now.getHours();

  const secDeg = seconds * 6; // 360° / 60
  const minDeg = minutes * 6 + seconds * 0.1;
  const hourDeg = (hours % 12) * 30 + minutes * 0.5;

  document.querySelector(".second").style.transform = `translateX(-50%) rotate(${secDeg}deg)`;
  document.querySelector(".minute").style.transform = `translateX(-50%) rotate(${minDeg}deg)`;
  document.querySelector(".hour").style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock();