私たちは、お客様のプライバシーを大切にします

私たちは、お客様のブラウジング体験を向上させ、パーソナライズされた広告やコンテンツを提供し、当社のトラフィックを分析するためにクッキーを使用しています。「すべてのクッキーを受け入れる」をクリックすると、当社のクッキーの使用に同意したことになります。

同意に関する設定をカスタマイズ

当社は、お客様を効率的にナビゲートし、特定の機能を実行できることを目的としてクッキーを使用しています。以下の各同意項目の下に、すべてのクッキーの詳細情報が記載されています。

「必須」に分類されるクッキーは、サイトの基本的な機能を有効にするために不可欠であるため、お客様のブラウザに保存されます。

また、当社は、お客様による本サイトの利用状況を分析し、お客様の好みを保存し、お客様に関連するコンテンツや広告を提供するために、サードパーティーのクッキーを使用しています。これらのクッキーは、お客様の事前の同意がある場合にのみ、お客様のブラウザに保存されます。

お客様は、これらのクッキーの一部、または全部を有効または無効にすることができますが、一部のクッキーを無効にすると、お客様のブラウジング体験に影響を与える場合があります。

常に効にする

必須クッキーとは、安全なログインの提供や同意設定の調整など、このサイトの基本機能を有効にするために必要なクッキーです。これらのクッキーは、個人を特定できるようなデータを保存することはありません。

表示するクッキーがありません。

機能クッキーは、ソーシャルメディアプラットフォームでのウェブサイトのコンテンツの共有、フィードバックの収集、その他のサードパーティの機能など、特定の機能の実行をサポートします。

表示するクッキーがありません。

分析用クッキーは、訪問者がウェブサイトとどのように関わっているかを理解するために使用されます。これらのクッキーは、訪問者数、直帰率、トラフィックソースなどの指標に関する情報を提供することをサポートします。

表示するクッキーがありません。

パフォーマンスクッキーは、ウェブサイトの主要なパフォーマンス指標を理解し、分析するために使用され、訪問者に優れたユーザー体験を提供することをサポートします。

表示するクッキーがありません。

広告クッキーは、訪問者が以前に訪れたページに基づいてカスタマイズされた広告を提供し、広告キャンペーンの有効性を分析するために使用されます。

表示するクッキーがありません。

プログラミング

CSS と JavaScript で時計作成

最終更新： 16/04/2025
1 分の読み

CSS と JavaScript を使ってアナログ時計を作成する方法

ウェブ開発において、時計の作成は学習に最適なプロジェクトの一つです。今回は、CSS と JavaScript を使ってシンプルなアナログ時計を作成する方法を解説します。以下の手順を追って、デザインから機能までを実装していきます。

1. 必要な HTML の構造

まずは、基本的な HTML を作成します。時計の枠と、時針、分針、秒針をそれぞれ作成するための要素を用意します。

関連記事
html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アナログ時計title>
    <link rel="stylesheet" href="styles.css">
head>
<body>
    <div class="clock">
        <div class="hour-hand">div>
        <div class="minute-hand">div>
        <div class="second-hand">div>
        <div class="center-point">div>
    div>
    <script src="script.js">script>
body>
html>

この HTML では、時計を表示するための div.clock を中心に、時針、分針、秒針の div 要素を配置しています。

2. CSS のスタイリング

次に、時計の見た目を作るための CSS を設定します。ここでは、時計の形、針のスタイル、そして針が動くアニメーションを設定します。

css
/* 基本のスタイル */
* {
    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: 10px solid #333;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 中央の点 */
.center-point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 針の共通設定 */
.clock div {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333;
    transform-origin: 50% 100%;
    transition: all 0.05s;
}

/* 時針 */
.hour-hand {
    width: 8px;
    height: 70px;
    transform: translateX(-50%) translateY(-100%) rotate(90deg);
}

/* 分針 */
.minute-hand {
    width: 6px;
    height: 90px;
    transform: translateX(-50%) translateY(-100%) rotate(180deg);
}

/* 秒針 */
.second-hand {
    width: 2px;
    height: 100px;
    background-color: red;
    transform: translateX(-50%) translateY(-100%) rotate(270deg);
}

この CSS では、時計の枠や針のスタイル、中心の点を設定しました。transform-origin を使って、針が中心を基点に回転するようにしています。

3. JavaScript で時刻を動的に設定

次に、JavaScript を使って時計の針を動的に回転させるロジックを追加します。setInterval を使って、秒ごとに時計を更新する仕組みを作ります。

javascript
// 現在時刻を取得して針を回転させる関数
function setClock() {
    const now = new Date();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();

    // 時針、分針、秒針の角度を計算
    const hourDeg = (hour % 12) * 30 + (minute / 60) * 30; // 1時間 = 30度
    const minuteDeg = minute * 6 + (second / 60) * 6;       // 1分 = 6度
    const secondDeg = second * 6;                            // 1秒 = 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)`;
}

// 時計を毎秒更新
setInterval(setClock, 1000);

この JavaScript のコードでは、setInterval を使って、毎秒時計を更新し、現在の時刻に合わせて針を回転させています。getHours(), getMinutes(), getSeconds() を使って現在の時刻を取得し、各針の角度を計算しています。

4. 時計の動作確認

これで、ブラウザでこの HTML ファイルを開くと、時計の針が実際に動き始めるのを確認できます。JavaScript が時刻をリアルタイムで更新し、CSS が時計のデザインを美しく仕上げます。

まとめ

このチュートリアルでは、HTML、CSS、そして JavaScript を組み合わせて、シンプルなアナログ時計を作成しました。CSS で時計のデザインを整え、JavaScript で時刻を動的に更新することで、リアルタイムで動く時計を作成することができました。

この基本的な時計の作り方を応用すれば、デジタル時計やその他のインタラクティブな時計を作成することも可能です。ぜひ、コードをカスタマイズして自分だけの時計を作成してみてください。

最終更新： 16/04/2025
1 分の読み
Back to top button