こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、メモ帳アプリをCSSでスタイリングします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML & JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Notes App</title> </head> <body> <button class="add" id="add"> <i class="fas fa-plus"></i> Add note </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script> <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 93 94 95 |
// 要素を取得する const addBtn = document.getElementById('add') // ローカルストレージからデータを取得する const notes = JSON.parse(localStorage.getItem('notes')) // メモ帳追加処理を実行 if(notes) { notes.forEach(note => addNewNote(note)) } // 作成ボタンのクリックイベントの登録 addBtn.addEventListener('click', () => addNewNote()) function addNewNote(text = '') { // div要素を作成 const note = document.createElement('div') // noteクラスを追加 note.classList.add('note') // メモ帳を追加 note.innerHTML = ` <div class="tools"> <button class="edit"><i class="fas fa-edit"></i></button> <button class="delete"><i class="fas fa-trash-alt"></i></button> </div> <div class="main ${text ? "" : "hidden"}"></div> <textarea class="${text ? "hidden" : ""}"></textarea> ` // 操作に必要な要素を取得 const editBtn = note.querySelector('.edit') const deleteBtn = note.querySelector('.delete') const main = note.querySelector('.main') const textArea = note.querySelector('textarea') // テキストエリアに引数で渡したテキストを代入 // 新規/編集があるのでこうしている textArea.value = text // markedは、HTMLに追加したプラグイン main.innerHTML = marked(text) // 削除のクリックイベントの登録 deleteBtn.addEventListener('click', () => { deleteNote(note) }) // 編集ボタンのクリックイベント editBtn.addEventListener('click', () => { editNote(main, textArea) }) // テキストエリアのイベント textArea.addEventListener('input', (e) => { const { value } = e.target main.innerHTML = marked(value) // ローカルストレージの更新 updateLS() }) // bodyの子要素として追加 document.body.appendChild(note) } // ローカルストレージにメモ帳を保存 function updateLS() { // 要素を取得 const notesText = document.querySelectorAll('textarea') const notes = [] // 要素を格納 notesText.forEach(note => notes.push(note.value)) // notesという名前でローカルストレージを保存 localStorage.setItem('notes', JSON.stringify(notes)) } // メモ帳削除 function deleteNote(note) { // ノートを削除 note.remove() // ローカルストレージの更新 updateLS() } // メモ帳編集 function editNote(main, textArea) { // hiddenがついているものは消し、ついてないものは付与する main.classList.toggle('hidden') textArea.classList.toggle('hidden') } |

スタイリング
これからCSSでスタイリングをします。項目に出てくるbodyやaddは、HTMLの要素です。
全体の設定
1 2 3 4 5 6 7 8 9 10 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* ボックスの大きさの算出方法を指定 */ box-sizing: border-box; /* 要素の輪郭を消す */ outline: none; } |
bodyの設定
1 2 3 4 5 6 7 8 9 10 |
body { background-color: #7bdaf3; font-family: "Poppins", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを複数行に分割 */ flex-wrap: wrap; margin: 0; padding-top: 3rem; } |

addの設定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.add { position: fixed; top: 1rem; right: 1rem; background-color: #9ec862; color: #fff; border: none; border-radius: 3px; padding: 0.5rem 1rem; cursor: pointer; } .add:active { /* ボタンの押した感を出す */ transform: scale(0.98); } |

noteの設定
1 2 3 4 5 6 7 8 |
.note { background-color: #fff; box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); margin: 30px 20px; height: 400px; width: 400px; overflow-y: scroll; } |

note .toolsの設定
1 2 3 4 5 6 7 |
.note .tools { background-color: #9ec862; display: flex; /* フレックスアイテムを末尾に寄せる */ justify-content: flex-end; padding: 0.5rem; } |

note .tools buttonの設定
1 2 3 4 5 6 7 8 |
.note .tools button { background-color: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; margin-left: 0.5rem; } |

note textareaの設定
1 2 3 4 5 6 7 8 9 |
.note textarea { outline: none; font-family: inherit; font-size: 1.2rem; border: none; height: 400px; width: 100%; padding: 20px; } |

mainの設定
1 2 3 |
.main { padding: 20px; } |

hiddenの設定
1 2 3 |
.hidden { display: none; } |
これで、完成です。
おわりに
CSSを自由自在に扱えるようになるとアプリケーション開発の世界が変わって見えます。ただ、「デザイン力」をあげないといつまで経ってもショボいUIのままなので、そこもまた勉強したいところですね^^
それでは、また!
関連記事
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 77 78 79 80 81 82 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* ボックスの大きさの算出方法を指定 */ box-sizing: border-box; /* 要素の輪郭を消す */ outline: none; } body { background-color: #7bdaf3; font-family: "Poppins", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを複数行に分割 */ flex-wrap: wrap; margin: 0; padding-top: 3rem; } .add { position: fixed; top: 1rem; right: 1rem; background-color: #9ec862; color: #fff; border: none; border-radius: 3px; padding: 0.5rem 1rem; cursor: pointer; } .add:active { /* ボタンの押した感を出す */ transform: scale(0.98); } .note { background-color: #fff; box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1); margin: 30px 20px; height: 400px; width: 400px; overflow-y: scroll; } .note .tools { background-color: #9ec862; display: flex; /* フレックスアイテムを末尾に寄せる */ justify-content: flex-end; padding: 0.5rem; } .note .tools button { background-color: transparent; border: none; color: #fff; cursor: pointer; font-size: 1rem; margin-left: 0.5rem; } .note textarea { outline: none; font-family: inherit; font-size: 1.2rem; border: none; height: 400px; width: 100%; padding: 20px; } .main { padding: 20px; } .hidden { display: none; } |
コメントを残す
コメントを投稿するにはログインしてください。