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

こんにちは。KOUKIです。

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

実装するもの

ToDoリストアプリをCSSでスタイリングします。

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

ワークスペース

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

JavaScript版

プラスGo言語

HTML & JavaScript

最初にページを作成しましょう。

スタイリング

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

全体の設定

bodyの設定

h1の設定

formの設定

inputの設定

input::placeholderの設定

input:focusの設定

todosの設定

todos li の設定

todos li.completedの設定

smallの設定

これで、完成です。

おわりに

Todoリストは、アイテムの作成、更新、削除、表示の4大要素全てを実装できる万能アプリケーションです。

実務でも応用が効く最高の一品なので、ぜひ実装にチャレンジしてくださいね^^

それでは、また!

CSSまとめ

CSSソースコード

コメントを残す