こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
ToDoリストアプリをCSSでスタイリングします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
プラスGo言語
HTML & JavaScript
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Todo List</title> </head> <body> <h1>todos</h1> <form id="form"> <input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off"> <ul class="todos" id="todos"></ul> </form> <small>Left click to toggle completed. <br> Right click to delete todo</small> <script src="script.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// 要素の取得 const form = document.getElementById('form') const input = document.getElementById('input') const todosUL = document.getElementById('todos') // ローカルストレージからデータを取得 const todos = JSON.parse(localStorage.getItem('todos')) // 画面を開いた時にリストを生成する if(todos) { todos.forEach(todo => addTodo(todo)) } // Todo入力時に発火する form.addEventListener('submit', (e) => { // デフォルトの動きをキャンセル e.preventDefault() // Todoを作成 addTodo() }) // Todo作成 function addTodo(todo) { // 入力文字を取得 let todoText = input.value if(todo) { todoText = todo.text } if(todoText) { // liリストを作成 const todoEl = document.createElement('li') // タスク完了かチェック // todoはオブジェクトを格納でき、completedを持っている if(todo && todo.completed) { // completedクラスをつける todoEl.classList.add('completed') } todoEl.innerText = todoText // Todoをクリックした時に発火 todoEl.addEventListener('click', () => { // completedクラスがついてたら削除、そうでない場合は付与 todoEl.classList.toggle('completed') // ローカルストレージを更新 updateLS() }) // 右クリックした時に発火するイベント todoEl.addEventListener('contextmenu', (e) => { // デフォルトの動きをキャンセル e.preventDefault() // Todo削除 todoEl.remove() // ローカルストレージを更新 updateLS() }) // Todoを親要素の子要素として追加 todosUL.appendChild(todoEl) // 入力欄をクリア input.value = '' // ローカルストレージを更新 updateLS() } } // ローカルストレージ更新 function updateLS() { // li要素を取得 todosEl = document.querySelectorAll('li') // 保存データ const todos = [] todosEl.forEach(todoEl => { // オブジェクトを配列にpush todos.push({ text: todoEl.innerText, completed: todoEl.classList.contains('completed') }) }) // ローカルストレージにtodosキーで保存保存 localStorage.setItem('todos', JSON.stringify(todos)) } |
スタイリング
これからCSSでスタイリングをしていきます。項目に出てくるbodyやh1は、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* ボックスの大きさを算出 */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 |
body { background-color: #f5f5f5f5; color: #444; font-family: "Poppins", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } |
h1の設定
|
1 2 3 4 5 6 |
h1 { color: rgb(179, 131, 226); font-size: 10rem; text-align: center; opacity: 0.4; } |
formの設定
|
1 2 3 4 5 |
form { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 100%; width: 400px; } |
inputの設定
|
1 2 3 4 5 6 7 8 |
.input { border: none; color: #444; font-size: 2rem; padding: 1rem 2rem; display: block; width: 100%; } |
input::placeholderの設定
|
1 2 3 |
.input::placeholder { color: #d5d5d5; } |
input:focusの設定
|
1 2 3 4 |
/* フォーカスを当てた時 */ .input:focus { outline-color: rgb(179, 131, 226); } |
todosの設定
|
1 2 3 4 5 6 |
.todos { background-color: #fff; padding: 0; margin: 0; list-style: none; } |
todos li の設定
|
1 2 3 4 5 6 |
.todos li { border-top: 1px solid #e5e5e5; cursor: pointer; font-size: 1.5rem; padding: 1rem 2rem; } |
todos li.completedの設定
|
1 2 3 4 5 |
.todos li.completed { color: #b6b6b6; /* 打ち消し線を入れる */ text-decoration: line-through; } |
smallの設定
|
1 2 3 4 5 |
small { color: #b5b5b5; margin-top: 3rem; text-align: center; } |
これで、完成です。
おわりに
Todoリストは、アイテムの作成、更新、削除、表示の４大要素全てを実装できる万能アプリケーションです。
実務でも応用が効く最高の一品なので、ぜひ実装にチャレンジしてくださいね^^
それでは、また!
CSSまとめ
CSSソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* ボックスの大きさを算出 */ box-sizing: border-box; } body { background-color: #f5f5f5f5; color: #444; font-family: "Poppins", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } h1 { color: rgb(179, 131, 226); font-size: 10rem; text-align: center; opacity: 0.4; } form { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 100%; width: 400px; } .input { border: none; color: #444; font-size: 2rem; padding: 1rem 2rem; display: block; width: 100%; } .input::placeholder { color: #d5d5d5; } /* フォーカスを当てた時 */ .input:focus { outline-color: rgb(179, 131, 226); } .todos { background-color: #fff; padding: 0; margin: 0; list-style: none; } .todos li { border-top: 1px solid #e5e5e5; cursor: pointer; font-size: 1.5rem; padding: 1rem 2rem; } .todos li.completed { color: #b6b6b6; /* 打ち消し線を入れる */ text-decoration: line-through; } small { color: #b5b5b5; margin-top: 3rem; text-align: center; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。