CSS と JavaScript で時計作成
導入
ウェブデザインやフロントエンド開発において、動的な時計やタイマー、カウンターを作成することは一般的な課題の一つです。その中でも、アナログ時計は直感的で視覚的にわかりやすく、ユーザーの注意を引き付ける効果的なUI要素となります。この記事では、CSSとJavaScriptを駆使して、シンプルながらも高機能なアナログ時計を構築する方法を体系的に解説します。初めての方から経験者まで参考となる詳細な解説を含め、また、日本の文化やデザインに合ったスタイルと実装例も紹介します。これにより、あなたのウェブサイトやアプリケーションにおいて、時間を表示する視覚的要素として役立てることができるでしょう。なお、この記事は文化ブログ(bunkao.com)に掲載予定です。
HTMLによる基本構造の作成
1. 時計の土台となるHTML構造
アナログ時計を作成するためには、まず適切なHTMLのマークアップが必要です。ここでは、時計の枠と針を表現するための
<div class="clock">
<div class="center-point"></div>
<div class="hand hour-hand"></div>
<div class="hand minute-hand"></div>
<div class="hand second-hand"></div>
</div>このマークアップでは、中央の点（.center-point）と、3つの針（.hour-hand, .minute-hand, .second-hand）を配置しています。これらはすべて絶対配置により時計の盤の中心を基点に動かすための要素です。
2.HTMLの詳細解説
それぞれの要素は次の通りです。
- .clock: 時計の枠全体を囲むコンテナです。直径やスタイルをここで設定します。
- .center-point: 時計の針の中心点を示し、針の回転軸となる場所です。
- .handクラスを持つ各針: 時針、分針、秒針を表します。それぞれ異なるクラス名が付与されており、個別にスタイルや動作を設定できます。
CSSによるスタイリングとデザイン
1. 時計の枠と中央点のスタイル
次に、CSSを用いて時計の外観を整えます。見た目の美しさだけでなく、視認性や操作性も考慮します。以下に基本的なスタイル例を示します。
/* Resetと基本設定 */ * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
/* 時計の枠とスタイル */ .clock {
position: relative;
width: 300px;
height: 300px;
border: 12px solid #333;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 中央点のスタイル */ .center-point {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background-color: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
}
このスタイルでは、時計の枠は円形のボーダーと背景色で表現し、中央点は小さな円として配置しています。transform: translate(-50%, -50%)により、親要素の中心にぴったりと配置されます。
2. 針の基本スタイル
次に、針の基本的なスタイルを設定します。回転の中心（transform-origin）や長さ、幅、色をパラメータとしてカスタマイズします。
.hand {
position: absolute;
top: 50%;
left: 50%;
transform-origin: 50% 100%;
background-color: #333;
transition: all 0.05s cubic-bezier(0.4, 2.3, 0.3, 1);
}
/* 時針のスタイル */ .hour-hand {
width: 8px;
height: 70px;
}
/* 分針のスタイル */ .minute-hand {
width: 6px;
height: 90px;
}
/* 秒針のスタイル */ .second-hand {
width: 2px;
height: 100px;
background-color: red;
}
この設定により、各針は中心を軸に回転しやすくなり、CSSのtransitionにより滑らかに動作します。針の太さと長さのバランスは、視認性とデザイン性を重視して調整しましょう。
JavaScriptによる時間の計算と針の回転制御
1. 現在時刻を取得し、針の角度を計算
次にJavaScriptを使って、リアルタイムの時間に従って針を回転させるロジックを作成します。基本的なアイデアは、Dateオブジェクトを利用して現在時刻を取得し、その角度を計算してスタイルに反映させることです。
function setClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 時針の角度計算
const hourDeg = (hours % 12) * 30 + (minutes / 60) * 30;
// 分針の角度計算
const minuteDeg = minutes * 6 + (seconds / 60) * 6;
// 秒針の角度計算
const secondDeg = seconds * 6;
// 各針の回転角度をスタイルに適用
document.querySelector('.hour-hand').style.transform = `translateX(-50%) translateY(-100%) rotate(${hourDeg}deg)`;
document.querySelector('.minute-hand').style.transform = `translateX(-50%) translateY(-100%) rotate(${minuteDeg}deg)`;
document.querySelector('.second-hand').style.transform = `translateX(-50%) translateY(-100%) rotate(${secondDeg}deg)`;
}
この関数は、現在の時間を取得し、それに基づいて各針の角度を計算しています。時針は1時間あたり30度、分針と秒針はそれぞれ6度ずつ回転します。ただし、分や秒の進みも考慮し、滑らかさを維持しています。
2. 定期的な更新処理
毎秒の更新を実現するために、setIntervalを使用します。これにより、1秒ごとに時計がリフレッシュされ、正確な時間を反映します。
setInterval(setClock, 1000);
// 初回実行も忘れずに
setClock();
これにより、ページがロードされた後すぐに時計が正しい時刻に合わせて針を動かし、その後も1秒ごとに絶えず更新されます。
動作確認と微調整
1. 実機での動作検証
HTMLとCSS、JavaScriptをすべて組み合わせたコードをブラウザで開くと、針が動き出し、リアルタイムで時刻を示すアナログ時計が完成します。動作の滑らかさや針の動きの正確性についてもここで確認します。
2. より滑らかな針の動き
秒針の動きをより滑らかにしたい場合は、setInterval の間隔を短く設定したり、CSSのtransition効果を調整したりすることができます。また、JavaScript内で時間の計算を高頻度に行い、アニメーションの補完を行う方法もあります。
応用とカスタマイズのアイデア
1. 針のデザイン変更
針の太さや色、形状などはCSSのスタイルを変更するだけで多彩にカスタマイズできます。例えば、針を細長い矢印型や、アイコン風にすることも可能です。CSSのborderや擬似要素を併用することも検討してください。
2. 時計の盤面の拡張
目盛りや数字を追加することで、実用的な時計に仕上げることもできます。数字を等間隔に配置したり、目盛り線を付け加えることも人気です。特に、文化やデザインのテーマにあったスタイルを取り入れることで、より魅力的な時計を作成できます。
3. インタラクティブな機能の追加
たとえば、時間設定用のインターフェースを追加し、手動で時刻を調整できるようにしたり、アラームやタイマーを組み込むことも可能です。これらの拡張により、単なる表示から、より高度な時計アプリへと進化させることができます。
まとめ
本記事では、CSSとJavaScriptを用いたシンプルなアナログ時計の作り方を実例を交えて解説しました。HTMLによる構造の設計、CSSによるビジュアルの整形、そしてJavaScriptによる時間のリアルタイム反映—これらを組み合わせることで、動的かつ美しい時計を実現できます。作成した時計は、ウェブサイトの本格的なUIエレメントだけでなく、学習教材としても非常に有効です。ぜひ、自分なりのスタイルや機能を追加して、オリジナルのアナログ時計を完成させてください。文化ブログ(bunkao.com)では、こうした日本文化と調和したデジタルデザインのアイデアも今後紹介していきます。