JavaScriptとCSSで作るアナタタログ時計
このプロジェクトは、純粋なJavaScript、HTML、CSSを使用して、リアルタイムで動作するアナタタログ時計を作成します。時針、分針、秒針が現在の時刻に基づいてスムーズに回転します。以下では、コードの構造とインタラクティブ効果の実現方法を解説します。
1. HTMLの構造
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JS + CSS Clock</title>
<link rel="icon" href="https://fav.farm/🔥" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
HTMLの構造に関する解説
-
<div class="clock">：時計の外枠を定義します。 -
<div class="clock-face">：文字盤のコンテナで、針の配置基準となります。 -
<div class="hand">：時針、分針、秒針を表します。各針はCSSでスタイルを指定し、JavaScriptで回転を制御します。 -
<script src="main.js">：時計の動的動作を制御するJavaScriptファイルを読み込みます。
2. CSSのスタイル
html {
background: #018ded url("https://unsplash.it/1500/1000?image=881&blur=5");
background-size: cover;
font-family: "helvetica neue";
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px);
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
CSSのスタイル設定に関する解説
全体のスタイル
-
html：背景に青いグラデーションとぼかし画像を設定。フォントはhelvetica neueに指定。 -
body：Flexboxを使用して時計を画面の中央に配置。
時計の外観
-
.clock：円形の白いボーダーで時計を表現。影（box-shadow）で立体感を追加。 -
.clock-face：針の位置を調整するため、Y軸を微調整（transform: translateY(-3px)）。
針のスタイル
-
.hand：幅50%、高さ6px、黒い背景。回転の支点を右端（transform-origin: 100%）に設定。 -
transform: rotate(90deg)：初期位置を3時方向（水平右）に設定。 -
transition：スムーズなアニメーションを実現。cubic-bezier(0.1, 2.7, 0.58, 1)で自然な動きを表現。
3. JavaScriptのロジック
const secondHand = document.querySelector(".second-hand");
const minHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const mins = now.getMinutes();
const hour = now.getHours();
const secondDegrees = (seconds / 60) * 360;
const minsDegrees = (mins / 60) * 360 + (seconds / 60 / 60) * 360;
const hourDegrees =
(hour / 12) * 360 + (mins / 60 / 12) * 360 + (seconds / 60 / 60 / 12) * 360;
secondHand.style.transform = `rotate(${secondDegrees + 180}deg)`;
minHand.style.transform = `rotate(${minsDegrees + 180}deg)`;
hourHand.style.transform = `rotate(${hourDegrees + 180}deg)`;
}
setInterval(setDate, 1000);
setDate();
JavaScriptのロジックに関する解説
要素取得
-
document.querySelectorを使用して、秒針（.second-hand）、分針（.min-hand）、時針（.hour-hand）のDOM要素を取得。
角度計算
- 秒針：
(seconds / 60) * 360（60秒で1周、360度）。 - 分針：
(mins / 60) * 360 + (seconds / 60 / 60) * 360（分に基づく回転に加え、秒による微調整を追加）。 - 時針：
(hour / 12) * 360 + (mins / 60 / 12) * 360 + (seconds / 60 / 60 / 12) * 360（時、分、秒による微調整を追加）。 -
+180：CSSの初期回転（rotate(90deg)）と12時基準（0度）を調整するために加算。
針の回転
-
style.transformを使用して各針を回転。例：secondHand.style.transform = \rotate(${secondDegrees + 180}deg)``。
リアルタイム更新
-
setInterval(setDate, 1000)：1秒ごとにsetDate関数を呼び出し、時計をリアルタイムで更新。 -
setDate()：ページ読み込み時に時計を即座に初期化。
インタラクティブ効果のポイント
-
リアルタイム動作：
setIntervalを使用して1秒ごとに時刻を更新し、時計を動的に動作させる。 -
スムーズなアニメーション：CSSの
transitionとcubic-bezier(0.1, 2.7, 0.58, 1)で、自然で滑らかな針の動きを実現。 -
正確な時間表示：
new Date()で現在の時刻を取得し、角度を精密に計算。 -
視覚的デザイン：円形のデザインと影（
box-shadow）で、リアルなアナタタログ時計を表現。
改善ポイント
- 文字盤に1〜12の数字を追加して視認性を向上。
- 秒針の「カチッ」音を
<audio>要素で再生。 - ドラッグ操作で針を動かせるインタラクティブ機能を追加。
- レスポンシブ対応として、
vwやvh単位を使用して異なる画面サイズに対応。
まとめ
この時計アプリで学べること：
-
setIntervalを使ったリアルタイム更新 - CSSの
transformとtransitionでスムーズなアニメーション -
new Date()で現在の時刻を取得し、角度計算で針を制御
ぜひコピーして、自分だけのスタイリッシュなアナタタログ時計を作ってみてください！ 🕰️
GitHub でソースコードを見る
このアナログ時計の完全なソースコードはGitHubにあります。興味のある方は下記リンクからご覧ください。
https://github.com/Cyoukakitsu/JavaScript-30day/tree/main/02%20-%20JS%20and%20CSS%20Clock