[CSS]setTimoutカウンターアプリのUIを実装する

こんにちは。KOUKIです。

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

実装するもの

今回は、カウンターアプリのUIを実装します。

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

スタイリングを実装します。項目に出てくるbodyやcounterは、HTMLの要素です。

全体の設定

全体の設定をします。

bodyの設定

bodyの設定をします。

counter-containerの設定

counter-containerのをします。

counterの設定

counterの設定をします。

メディアクエリの設定

メディアクエリの設定をします。

これで、完成です。

おわりに

メディアクエリを使うとレスポンシブルウェブサイトが作れて便利ですよね。
まぁ、この辺りはBootstrapを導入すれば割と簡単に実装できたりしますが、仕組みを知る上で自分でも実装できると良いと思います^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す