こんにちは。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 |
<!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>Toast Notification</title> </head> <body> <div id="toasts"></div> <button class="btn" id="button">Show Notification</button> <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 |
// 要素を取得 const button = document.getElementById('button') const toasts = document.getElementById('toasts') // 通知メッセージの定義 const messages = [ 'Message One', 'Message Two', 'Message Three', 'Message Four', ] // 通知タイプの定義 const types = ['info', 'success', 'error'] // clickイベントの登録 button.addEventListener('click', () => createNotification()) // 通知作成機能 function createNotification(message = null, type = null) { // HTML要素の作成 const notif = document.createElement('div') notif.classList.add('toast') notif.classList.add(type ? type : getRandomType()) // メッセージをランダムに取得 notif.innerText = message ? message : getRandomMessage() // 子要素として追加 toasts.appendChild(notif) // 3秒後に通知を消す setTimeout(() => { notif.remove() }, 3000) } // Typeをランダムに取得 function getRandomType() { return types[Math.floor(Math.random() * types.length)] } // メッセージをランダムに取得 function getRandomMessage() { return messages[Math.floor(Math.random() * messages.length)] } |
スタイリング
CSSでスタイリングをしていきましょう。項目に出てくるbodyやbtnはHTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* paddingとborderをwidthとhaightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { background-color: rebeccapurple; font-family: "Poppins", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; /* ビューポートに対して高さ100% */ height: 100vh; /* 横スクロールを非表示にする */ overflow: hidden; margin: 0; } |
btnの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.btn { background-color: #fff; color: rebeccapurple; font-family: inherit; font-weight: bold; padding: 1rem; border-radius: 5px; border: none; cursor: pointer; } /* ボタンを押した時 */ .btn:focus { /* 青い線を非表示 */ outline: none; } /* ボタンがアクティブ */ .btn:active { /* ボタンを少し小さくして押した感を出す */ transform: scale(0.98); } |
toastsの設定
ボタンを押すとスタイリング結果がわかります。
|
1 2 3 4 5 6 7 8 9 10 11 |
/* idに対してスタイリング */ #toasts { /* 位置を固定 */ position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: column; /* フレックスアイテムを末尾にまとめる */ align-items: flex-end; } |
toastの設定
|
1 2 3 4 5 6 |
.toast { background-color: #fff; border-radius: 5px; padding: 1rem 2rem; margin: 0.5rem; } |
toast.infoの設定
|
1 2 3 |
.toast.info { color: rebeccapurple; } |
toast.successの設定
|
1 2 3 |
.toast.success { color: green; } |
toast.errorの設定
|
1 2 3 |
.toast.error { color: red; } |
これで、完成です。
おわりに
CSSのスタイリングは、最初はとっかかりにくいのですが、慣れてくると自由自在に要素を配置できるようになったり、かっこいいスタイリングができるようになってくるので、モチベーション維持がしやすいです。
ここで学んだことを活かして、かっこいいWebアプリを作成したいと思います^^
それでは、また！
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap"); * { /* paddingとborderをwidthとhaightに含める */ box-sizing: border-box; } body { background-color: rebeccapurple; font-family: "Poppins", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; /* ビューポートに対して高さ100% */ height: 100vh; /* 横スクロールを非表示にする */ overflow: hidden; margin: 0; } .btn { background-color: #fff; color: rebeccapurple; font-family: inherit; font-weight: bold; padding: 1rem; border-radius: 5px; border: none; cursor: pointer; } /* ボタンを押した時 */ .btn:focus { /* 青い線を非表示 */ outline: none; } /* ボタンがアクティブ */ .btn:active { /* ボタンを少し小さくして押した感を出す */ transform: scale(0.98); } /* idに対してスタイリング */ #toasts { /* 位置を固定 */ position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: column; /* フレックスアイテムを末尾にまとめる */ align-items: flex-end; } .toast { background-color: #fff; border-radius: 5px; padding: 1rem 2rem; margin: 0.5rem; } .toast.info { color: rebeccapurple; } .toast.success { color: green; } .toast.error { color: red; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。