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

こんにちは。KOUKIです。

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

実装するもの

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

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

ワークスペース

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

JavaScript版

HTML & JavaScript

スタイリング

これからCSSでスタイリングをします。項目に出てくるbodyやaddは、HTMLの要素です。

全体の設定

bodyの設定

addの設定

noteの設定

note .toolsの設定

note .tools buttonの設定

note textareaの設定

mainの設定

hiddenの設定

これで、完成です。

おわりに

CSSを自由自在に扱えるようになるとアプリケーション開発の世界が変わって見えます。ただ、「デザイン力」をあげないといつまで経ってもショボいUIのままなので、そこもまた勉強したいところですね^^

それでは、また!

関連記事

CSSまとめ

CSSソースコード

コメントを残す