こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、フィードバック機能のスタイリングをします。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 |
$ 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 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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>Let Us Know Your Feedback</title> </head> <body> <div id="panel" class="panel-container"> <strong>How satisfied are you with our <br /> customer support performance?</strong> <div class="ratings-container"> <div class="rating"> <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt=""> <small>Unhappy</small> </div> <div class="rating"> <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt=""/> <small>Neutral</small> </div> <div class="rating active"> <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt=""/> <small>Satisfied</small> </div> </div> <button class="btn" id="send">Send Review</button> </div> <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 |
// 要素の取得 const ratings = document.querySelectorAll('.rating') const ratingsContainer = document.querySelector('.ratings-container') const sendBtn = document.querySelector('#send') const panel = document.querySelector('#panel') // Ratingの初期値 let selectedRating = 'Satisfied' // 顔画像をクリックした時に発火 ratingsContainer.addEventListener('click', (e) => { // 顔画像の親要素にratingクラスがついているかチェック if(e.target.parentNode.classList.contains('rating')) { // アクティブ解除 removeActive() // クリックした顔画像の親要素にactiveクラスをつける e.target.parentNode.classList.add('active') // HTMLに埋め込まれたRating(Unhappy/Neutral/Satisfied)を取得 selectedRating = e.target.nextElementSibling.innerHTML } }) // Send Reviewをクリックした時に発火 sendBtn.addEventListener('click', (e) => { panel.innerHTML = ` <i class="fas fa-heart"></i> <strong>Thank You!</strong> <br> <strong>Feedback: ${selectedRating}</strong> <p>We'll use your feedback to improve our customer support</p> ` }) // アクティブ解除 function removeActive() { for(let i = 0; i < ratings.length; i++) { ratings[i].classList.remove('active') } } |
スタイリング
これからCSSでスタイリングをしていきます。
項目に出てくるbodyやpanel-containerは、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
body { background-color: #f3f9f2; font-family: "Montserrat", sans-serif; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; margin: 0; } |
panel-containerの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.panel-container { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 4px; font-size: 90%; display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; align-items: center; justify-content: center; padding: 30px; max-width: 400px; } |
panel-container strongの設定
|
1 2 3 |
.panel-container strong { line-height: 20px; } |
ratings-containerの設定
|
1 2 3 4 |
.ratings-container { display: flex; margin: 20px 0; } |
ratingの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.rating { /* flexアイテムの大きさを均等にする */ flex: 1; cursor: pointer; padding: 20px; margin: 10px 5px; } .rating:hover, .rating.active { border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } |
rating imgの設定
|
1 2 3 |
.rating img { width: 40px; } |
rating smallの設定
|
1 2 3 4 5 6 7 8 9 10 11 |
.rating small { color: #555; display: inline-block; /* 上 | 左右 | 下 */ margin: 10px 0 0; } .rating:hover small, .rating.active small { color: #111; } |
btnの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.btn { background-color: #302d2b; color: #fff; border: 0; border-radius: 4px; padding: 12px 30px; cursor: pointer; } /* ボタンを押下した時 */ .btn:focus { /* 青線を消す */ outline: 0; } /* ボタンがアクティブになった時 */ .btn:active { /* ボタンに押した感を出す */ transform: scale(0.98); } |
fa-heartの設定
ここは、「Send Review」を押下して確認してください。
|
1 2 3 4 5 |
.fa-heart { color: red; font-size: 30px; margin-bottom: 10px; } |
これで、完成です。
おわりに
ここ一ヶ月ほど、毎日CSSのプロパティを手で書いているので、ほぼほぼ覚えてきました。そのため、コメントが少なめになっております^^;
まだCSSのプロパティになれていないよ！という方は、CSSまとめページの「レイアウト」の最初の方からスタイリングしていくとわかりやすいと思います!
それでは、また!
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
/* フォント */ @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); * { /* padding/borderをwidth/heightに含める */ box-sizing: border-box; } body { background-color: #f3f9f2; font-family: "Montserrat", sans-serif; /* flexアイテムにする */ display: flex; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .panel-container { background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); border-radius: 4px; font-size: 90%; display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; align-items: center; justify-content: center; padding: 30px; max-width: 400px; } .panel-container strong { line-height: 20px; } .ratings-container { display: flex; margin: 20px 0; } .rating { /* flexアイテムの大きさを均等にする */ flex: 1; cursor: pointer; padding: 20px; margin: 10px 5px; } .rating:hover, .rating.active { border-radius: 4px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .rating img { width: 40px; } .rating small { color: #555; display: inline-block; /* 上 | 左右 | 下 */ margin: 10px 0 0; } .rating:hover small, .rating.active small { color: #111; } .btn { background-color: #302d2b; color: #fff; border: 0; border-radius: 4px; padding: 12px 30px; cursor: pointer; } /* ボタンを押下した時 */ .btn:focus { /* 青線を消す */ outline: 0; } /* ボタンがアクティブになった時 */ .btn:active { /* ボタンに押した感を出す */ transform: scale(0.98); } .fa-heart { color: red; font-size: 30px; margin-bottom: 10px; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。