CSSでDrinkWaterアプリのスタイリングをしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、CSSでDrinkWaterアプリをスタイリングします。

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

ワークスペース

簡単な環境構築をお願いします。

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

HTML&JavaScript

スタイリング

これからCSSでスタイリングをしていきます。項目のbodyやh1は、HTMLに設定した要素です。

全体の設定

全体の設定をします。

bodyの設定

bodyの設定をします。

h1の設定

h1の設定をします。

h3の設定

h3の設定をします。

cupの設定

cupの設定をします。

cup-smallの設定

cup-smallの設定をします。

fullの設定

fullの設定をします。

cupsの設定

cupsの設定をします。

remainedの設定

remainedの設定をします。

spanの設定

spanの設定をします。

smallの設定

smallの設定をします。

percentageの設定

percentageの設定をします。

textの設定

textの設定をします。

これで、完成です。

おわりに

displayのflexさえ使いこなすことができれば、こんな感じのかっこいいアプリケーションも作れます。

Web開発者にとって、CSSはやはり必要な技術だなと思いました^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す