HTML、CSS、JavaScriptで作る！シンプルでスタイリッシュなデジタル時計【Web開発基本】

<div id="clock-container">
	<div id="date"></div>
	<div id="clock"></div>
</div>

#clock-container {
    text-align: center;
    color: #fff;
    background: #22223b;
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    border: 3px solid #9a8c98;
    padding: 20px;
}
#date {
    font-size: 36px;
}
#clock {
    font-size: 60px;
    letter-spacing: 3px;
}

@media (max-width: 600px) {
    #date {
        font-size: 24px;
    }
    #clock {
        font-size: 40px;
    }
}

function updateClock() {
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"][now.getDay()];
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');

    document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
    document.getElementById('date').textContent = `${year}年${month}月${day}日 (${dayOfWeek})`;
}

setInterval(updateClock, 1000);
updateClock();