CSSでカウントダウンアプリスタイリングしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、カウントダウンアプリをCSSでスタイリングしたいと思います。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

CSSでスタイリングします。項目に出てくるbodyやh4は、HTML要素です。

全体の設定

bodyの設定

h4の設定

counterの設定

hideの設定

finalの設定

final.showの設定

numsの設定

nums spanの設定

In/Outの設定

これで、完成です。

おわりに

アニメーションで要素を浮かび上がらせている処理は、かなり勉強になりますね^^

動きのあるアプリケーションの実装は、やはりワクワクします。

JavaScriptの知識も必要になりますが、ぜひ一度、実装してみてください。

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す