こんにちは！今回はHTMLとCSSを使って、シンプルなアナログ時計を作る方法を紹介します。
JavaScriptを使って針を動かす方法も含めて、一から丁寧に解説していきますので、WEB初心者の方も是非挑戦してみてください。
＜完成イメージ＞
これから作るアナログ時計は、時間のマーカー（目盛り）と3本の針（時針、分針、秒針）がある、シンプルなデザインのものです。
まずは完成したコードを見てみましょう。その後で、各部分の詳しい解説をしていきます。
全体のコード
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.clock {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: white;
border: 10px solid #333;
position: relative;
box-shadow: 0 15px 25px rgba(0,0,0,0.15), inset 0 5px 10px rgba(0,0,0,0.1);
}
.clock-face {
width: 100%;
height: 100%;
position: relative;
}
/* 時間のマーカー */
.mark {
position: absolute;
width: 4px;
height: 15px;
background-color: #333;
left: 50%;
margin-left: -2px;
transform-origin: 2px 150px;
}
/* 針 */
.hand {
position: absolute;
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
border-radius: 10px 10px 0 0;
transition: transform 0.5s cubic-bezier(0.4, 2.1, 0.3, 0.9);
}
.hour-hand {
width: 8px;
height: 80px;
background-color: #333;
margin-left: -4px;
}
.minute-hand {
width: 6px;
height: 120px;
background-color: #333;
margin-left: -3px;
}
.second-hand {
width: 2px;
height: 140px;
background-color: #E74C3C;
margin-left: -1px;
transition: transform 0s;
}
.center-point {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #333;
transform: translate(-50%, -50%);
z-index: 10;
}
.center-point::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #E74C3C;
transform: translate(-50%, -50%);
}
/* 12個の時間マーカーを生成 */
.mark:nth-child(1) { transform: rotate(0deg); }
.mark:nth-child(2) { transform: rotate(30deg); }
.mark:nth-child(3) { transform: rotate(60deg); }
.mark:nth-child(4) { transform: rotate(90deg); }
.mark:nth-child(5) { transform: rotate(120deg); }
.mark:nth-child(6) { transform: rotate(150deg); }
.mark:nth-child(7) { transform: rotate(180deg); }
.mark:nth-child(8) { transform: rotate(210deg); }
.mark:nth-child(9) { transform: rotate(240deg); }
.mark:nth-child(10) { transform: rotate(270deg); }
.mark:nth-child(11) { transform: rotate(300deg); }
.mark:nth-child(12) { transform: rotate(330deg); }
</style>
</head>
<body>
<div class="clock">
<div class="clock-face">
<!-- 時間のマーカー -->
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<div class="mark"></div>
<!-- 針 -->
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
<!-- 中心点 -->
<div class="center-point"></div>
</div>
</div>
<script>
function setTime() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360);
document.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6);
document.querySelector('.minute-hand').style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour % 12) / 12 * 360) + ((mins / 60) * 30);
document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setTime, 1000);
setTime();
</script>
</body>
</html>
それでは、このコードを部分ごとに詳しく解説していきます。
＜1. HTML構造＞
まずはHTMLの基本構造を見てみましょう。
html
<!DOCTYPE html>
<html>
<head>
<style>
/* CSSはここに記述します（後述） */
</style>
</head>
<body>
<div class="clock">
<div class="clock-face">
<!-- 時間のマーカー -->
<div class="mark"></div>
<!-- 同じdivを12個繰り返し -->
<!-- 針 -->
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
<!-- 中心点 -->
<div class="center-point"></div>
</div>
</div>
<script>
/* JavaScriptはここに記述します（後述） */
</script>
</body>
</html>
1. 最外側に `clock` クラスのdiv要素があります（時計全体を表す）
2. その中に `clock-face` クラスのdiv要素があります（文字盤を表す）
3. その中に以下の要素があります：
- 12個の `mark` クラスのdiv要素（時間のマーカー）
- 3つの `hand` クラスのdiv要素（時針、分針、秒針）
- 1つの `center-point` クラスのdiv要素（時計の中心点）
＜2. CSS解説＞
次に、CSSのコードを詳しく見ていきましょう。
2-1 全体のレイアウト
css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
- `display: flex`：flexboxレイアウトを使用
- `justify-content: center`, `align-items: center`：時計を水平・垂直方向の中央に配置
- `min-height: 100vh`：最小高さをビューポートの高さに設定
- `background-color: #f0f0f0`：背景色を薄いグレーに設定
- `margin: 0`, `padding: 0`：デフォルトのマージンとパディングを削除
2-2 時計の外観
css
.clock {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: white;
border: 10px solid #333;
position: relative;
box-shadow: 0 15px 25px rgba(0,0,0,0.15), inset 0 5px 10px rgba(0,0,0,0.1);
}
.clock-face {
width: 100%;
height: 100%;
position: relative;
}
- `.clock`：時計全体の外観を定義
- `width`, `height`：時計の大きさを300px×300pxに設定
- `border-radius: 50%`：要素を円形にする
- `background-color: white`：背景色を白に設定
- `border: 10px solid #333`：10pxの黒い枠線
- `position: relative`：子要素の位置決めの基準点として使用
- `box-shadow`：外側と内側に影を追加して立体感を出す
- `.clock-face`：時計の文字盤部分
- `position: relative`：子要素（マーカーや針）の配置の基準点として使用
2-3 時間のマーカー
css
.mark {
position: absolute;
width: 4px;
height: 15px;
background-color: #333;
left: 50%;
margin-left: -2px;
transform-origin: 2px 150px;
}
/* 12個の時間マーカーを生成 */
.mark:nth-child(1) { transform: rotate(0deg); }
.mark:nth-child(2) { transform: rotate(30deg); }
/* ... 以下同様 ... */
.mark:nth-child(12) { transform: rotate(330deg); }
- `.mark`：時間のマーカー（目盛り）のスタイルを定義
- `position: absolute`：親要素を基準に絶対配置
- `width: 4px`, `height: 15px`：マーカーの大きさ
- `left: 50%`, `margin-left: -2px`：水平方向の中央に配置
- `transform-origin: 2px 150px`：回転の中心点を設定（時計の中心から150px離れた点）
- `.mark:nth-child(n)`：12個のマーカーをそれぞれ30度ずつ回転させて配置
- `transform: rotate(Xdeg)`：X度だけ回転させる
2-4 針のスタイル
css
.hand {
position: absolute;
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
border-radius: 10px 10px 0 0;
transition: transform 0.5s cubic-bezier(0.4, 2.1, 0.3, 0.9);
}
.hour-hand {
width: 8px;
height: 80px;
background-color: #333;
margin-left: -4px;
}
.minute-hand {
width: 6px;
height: 120px;
background-color: #333;
margin-left: -3px;
}
.second-hand {
width: 2px;
height: 140px;
background-color: #E74C3C;
margin-left: -1px;
transition: transform 0s;
}
- `.hand`：すべての針に共通するスタイル
- `position: absolute`：親要素を基準に絶対配置
- `left: 50%`, `bottom: 50%`：時計の中心に配置
- `transform-origin: 50% 100%`：針の回転の中心点を針の下端に設定
- `border-radius`：針の上部を丸くする
- `transition`：針の動きをスムーズにするアニメーション効果
- `.hour-hand`：時針のスタイル
- 太さ8px、長さ80px
- 黒色（#333）
- `.minute-hand`：分針のスタイル
- 太さ6px、長さ120px
- 黒色（#333）
- `.second-hand`：秒針のスタイル
- 太さ2px、長さ140px
- 赤色（#E74C3C）
- `transition: transform 0s`：秒針はスムーズに動かさない
2-5 中心点
css
.center-point {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #333;
transform: translate(-50%, -50%);
z-index: 10;
}
.center-point::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #E74C3C;
transform: translate(-50%, -50%);
}
- `.center-point`：時計の中心点の外側の円
- `position: absolute`：親要素を基準に絶対配置
- `top: 50%`, `left: 50%`, `transform: translate(-50%, -50%)`：完全に中央に配置
- `width`, `height`, `border-radius: 50%`：16pxの円を作成
- `z-index: 10`：針よりも前面に表示
- `.center-point::after`：中心点の内側の円（赤い部分）
- 疑似要素を使用して内側の円を作成
- 外側の円と同様の中央配置
- 8pxの赤い円を中心に配置
＜3. JavaScript解説＞
最後に、JavaScriptのコードを詳しく見ていきましょう。
javascript
function setTime() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360);
document.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6);
document.querySelector('.minute-hand').style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour % 12) / 12 * 360) + ((mins / 60) * 30);
document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setTime, 1000);
setTime();
このJavaScriptコードは3つの部分に分かれています。
3-1 時間の取得と針の角度計算
javascript
function setTime() {
const now = new Date();
const seconds = now.getSeconds();
const secondsDegrees = ((seconds / 60) * 360);
document.querySelector('.second-hand').style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6);
document.querySelector('.minute-hand').style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = ((hour % 12) / 12 * 360) + ((mins / 60) * 30);
document.querySelector('.hour-hand').style.transform = `rotate(${hourDegrees}deg)`;
}
1. 現在の時刻を取得：`const now = new Date();`
2. 秒針の角度を計算して設定：
- 現在の秒数を取得：`const seconds = now.getSeconds();`
- 秒針の角度を計算（60秒で360度回転）：`const secondsDegrees = ((seconds / 60) * 360);`
- 秒針要素を選択して回転させる：`document.querySelector('.second-hand').style.transform = ...`
3. 分針の角度を計算して設定：
- 現在の分数を取得：`const mins = now.getMinutes();`
- 分針の角度を計算（基本は60分で360度、さらに秒の進み具合で微調整）：`const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6);`
- 分針要素を選択して回転させる
4. 時針の角度を計算して設定：
- 現在の時数を取得：`const hour = now.getHours();`
- 時針の角度を計算（12時間で360度、さらに分の進み具合で微調整）：`const hourDegrees = ((hour % 12) / 12 * 360) + ((mins / 60) * 30);`
- 時針要素を選択して回転させる
3-2 1秒ごとの更新設定
setInterval(setTime, 1000);
この行は、`setTime`関数を1秒（1000ミリ秒）ごとに実行するようにタイマーを設定していますこれにより、時計の針が1秒ごとに更新されます。
3-3 初期化
setTime();
ページ読み込み時に`setTime`関数を一度呼び出して、時計の針を現在の時刻に合わせて初期化します。
まとめ
これで、HTML、CSS、JavaScriptを使ったシンプルなアナログ時計の作り方の解説は完了です。
このコードをコピーして自分のウェブサイトに貼り付けるだけで、アナログ時計が動作します。
色や大きさ、針のデザインなどを変えるだけで、まったく異なる印象の時計になります。
ぜひ自分だけのオリジナル時計を作ってみてください！
#WEBクリエイター #WEB #WEBデザイン #WEBデザイナー #コーディング #在宅ワーク #WEB資格
