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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

ワークスペース

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

JavaScript版

[JavaScript]メモ帳アプリでタスク管理をしよう!

HTML & JavaScript

<!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>

<!DOCTYPE html>

<head>

<title>Notes App</title>

</head>

<body>

<i class="fas fa-plus"></i> Add note

</button>

</body>

</html>

// 要素を取得する
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')
}

// 要素を取得する

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>

// 操作に必要な要素を取得

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の要素です。

全体の設定

/* フォント */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");

* {
  /* ボックスの大きさの算出方法を指定 */
  box-sizing: border-box;

  /* 要素の輪郭を消す */
  outline: none;
}

/* フォント */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap");

* {

/* ボックスの大きさの算出方法を指定 */

box-sizing: border-box;

/* 要素の輪郭を消す */

outline: none;

}

bodyの設定

body {
  background-color: #7bdaf3;
  font-family: "Poppins", sans-serif;
  /* flexアイテムにする */
  display: flex;
  /* flexアイテムを複数行に分割 */
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3rem;
}

body {

background-color: #7bdaf3;

font-family: "Poppins", sans-serif;

/* flexアイテムにする */

display: flex;

/* flexアイテムを複数行に分割 */

flex-wrap: wrap;

margin: 0;

padding-top: 3rem;

}

addの設定

.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);
}

.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の設定

.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 {

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の設定

.note .tools {
  background-color: #9ec862;
  display: flex;
  /* フレックスアイテムを末尾に寄せる */
  justify-content: flex-end;
  padding: 0.5rem;
}

.note .tools {

background-color: #9ec862;

display: flex;

/* フレックスアイテムを末尾に寄せる */

justify-content: flex-end;

padding: 0.5rem;

}

note .tools buttonの設定

.note .tools button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.note .tools button {

background-color: transparent;

border: none;

color: #fff;

cursor: pointer;

font-size: 1rem;

margin-left: 0.5rem;

}

note textareaの設定

.note textarea {
  outline: none;
  font-family: inherit;
  font-size: 1.2rem;
  border: none;
  height: 400px;
  width: 100%;
  padding: 20px;
}

.note textarea {

outline: none;

font-family: inherit;

font-size: 1.2rem;

border: none;

height: 400px;

width: 100%;

padding: 20px;

}

mainの設定

.main {
  padding: 20px;
}

.main {

padding: 20px;

}

hiddenの設定

.hidden {
  display: none;
}

.hidden {

display: none;

}

これで、完成です。

おわりに

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

それでは、また！

JavaScriptで作るTodoリスト

CSSまとめ

CSS学習記事まとめ

CSSソースコード

/* フォント */
@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;
}

/* フォント */

@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;

}

月	火	水	木	金	土	日
			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

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

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

addの設定

noteの設定

note .toolsの設定

note .tools buttonの設定

note textareaの設定

mainの設定

hiddenの設定

おわりに

関連記事

CSSまとめ

CSSソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

ワークスペース

JavaScript版

HTML & JavaScript

スタイリング

全体の設定

bodyの設定

addの設定

noteの設定

note .toolsの設定

note .tools buttonの設定

note textareaの設定

mainの設定

hiddenの設定

おわりに

関連記事

CSSまとめ

CSSソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Golang/React]~MovieApp3: Formを作成しよう!~

Go言語でのバリデーションチェック

CSSで画像取得アプリのスタイリングをしよう!

CSSでユーザー検索アプリをスタイリングしよう！

[Go言語]テストコードの書き方1~基礎編~

[Go言語]Goroutineとパイプライン処理

Webデザイン1: リセットCSS

CSSでコンテンツボックスのスタイリングをしよう!

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル