CSSでアナログ時計のスタイリングをしよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、cssでアナログ時計のスタイリングをします。

demoは「こちら」で確認できます。

ワークスペース

必要なファイルは、以下の通りです。

JavaScript版

HTML & JavaScript

スタイリング

cssでスタイリングをしていきます。項目のhtmlやbodyは、HTML要素です。

全体の設定

全体の設定をします。

bodyの設定

bodyの設定をします。

toggleの設定

toggleの設定をします。

clock-containerの設定

clock-containerの設定をします。

clockの設定

clockの設定をします。

needleの設定

needleの設定をします。

時計針の設定

時計針の設定をします。

center-pointの設定

全体の設定をします。

疑似クラスの設定

疑似クラスの設定をします。

timeの設定

timeの設定をします。

dateの設定

dateの設定をします。

circleの設定

circleの設定をします。

darkの設定

darkの設定をします。Dark Modeを押下すると背景色が変化します。

これで、完成です。

おわりに

アナログ時計のスタイリングも面白いですね。工夫次第ではなんでもできるなと感じました^^

もっと勉強して、色々なWebアプリを作れるようになりたいですね。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す