こんにちは。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 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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>Good, Cheap, Fast</title> </head> <body> <h2>How do you want your project to be?</h2> <div class="toggle-container"> <input type="checkbox" id="good" class="toggle"> <label for="good" class="label"> <div class="ball"></div> </label> <span>Good</span> </div> <div class="toggle-container"> <input type="checkbox" id="cheap" class="toggle"> <label for="cheap" class="label"> <div class="ball"></div> </label> <span>Cheap</span> </div> <div class="toggle-container"> <input type="checkbox" id="fast" class="toggle"> <label for="fast" class="label"> <div class="ball"></div> </label> <span>Fast</span> </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 |
// 要素を取得する const toggles = document.querySelectorAll('.toggle') const good = document.querySelector('#good') const cheap = document.querySelector('#cheap') const fast = document.querySelector('#fast') // changeイベントの登録 toggles.forEach( toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target))) // トリックをつける function doTheTrick(theClickedOne) { if(good.checked && cheap.checked && fast.checked) { if(good === theClickedOne) { // fastを閉じる fast.checked = false } if(cheap === theClickedOne) { // goodを閉じる good.checked = false } if(fast === theClickedOne) { // cheapを閉じる cheap.checked = false } } } |
スタイリング
CSSでスタイリングしていきます。項目に出てくるbodyやtoggleは、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 8 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 padding/borderをwidth/heightに含める */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body { font-family: "Roboto", sans-serif; height: 100vh; /* スクロールを非表示 */ overflow: hidden; /* flexアイテムにする */ display: flex; /* flexアイテムを縦方向に並べる */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; margin: 0; } |
toggle-containerの設定
|
1 2 3 4 5 6 7 |
.toggle-container { display: flex; align-items: center; /* 上下 | 左右 */ margin: 10px 0; width: 200px; } |
toggleの設定
|
1 2 3 |
.toggle { visibility: hidden; } |
labelの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.label { /* アイテム位置の起点にする */ position: relative; background-color: #d0d0d0; border-radius: 50px; cursor: pointer; /* 要素をインラインブロックにする */ display: inline-block; margin: 0 15px 0; width: 80px; height: 40px; } |
toggle:checked + .labelの設定
|
1 2 3 4 |
/* トグルボタンを押下した時 */ .toggle:checked + .label { background-color: #8e44ad; } |
ballの設定
|
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 |
.ball { background: #fff; height: 34px; width: 34px; border-radius: 50%; /* relativeを起点にした絶対位置 */ position: absolute; top: 3px; left: 3px; align-items: center; justify-content: center; /* アニメーション */ animation: slideOff 0.3s linear forwards; } /* スライドをOFFにした時のアニメーション */ @keyframes slideOff { 0% { transform: translateX(40px) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(0) scale(1); } } |
toggle:checked + .label .ballの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.toggle:checked + .label .ball { animation: slideOn 0.3s linear forwards; } /* スライドをOFFにした時のアニメーション */ @keyframes slideOn { 0% { transform: translateX(0) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(40px) scale(1); } } |
これで、完成です。
おわりに
HTML/CSS/JavaScriptの技術があれば、フリーランスで仕事を受注することは可能だと思います。
もちろん、高度な技術レベルがあることが前提ですが。
しかし、本記事やJavaScript記事で紹介している内容が理解できれば、実務では通用すると思うので、一緒に勉強していきましょう^^
それでは、また！
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 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 padding/borderをwidth/heightに含める */ box-sizing: border-box; } body { font-family: "Roboto", sans-serif; height: 100vh; /* スクロールを非表示 */ overflow: hidden; /* flexアイテムにする */ display: flex; /* flexアイテムを縦方向に並べる */ flex-direction: column; /* flex重点にアイテムを配置 */ align-items: center; /* flex横軸中央にアイテムを配置 */ justify-content: center; margin: 0; } .toggle-container { display: flex; align-items: center; /* 上下 | 左右 */ margin: 10px 0; width: 200px; } .toggle { visibility: hidden; } .label { /* アイテム位置の起点にする */ position: relative; background-color: #d0d0d0; border-radius: 50px; cursor: pointer; /* 要素をインラインブロックにする */ display: inline-block; margin: 0 15px 0; width: 80px; height: 40px; } /* トグルボタンを押下した時 */ .toggle:checked + .label { background-color: #8e44ad; } .ball { background: #fff; height: 34px; width: 34px; border-radius: 50%; /* relativeを起点にした絶対位置 */ position: absolute; top: 3px; left: 3px; align-items: center; justify-content: center; /* アニメーション */ animation: slideOff 0.3s linear forwards; } /* スライドをOFFにした時のアニメーション */ @keyframes slideOff { 0% { transform: translateX(40px) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(0) scale(1); } } .toggle:checked + .label .ball { animation: slideOn 0.3s linear forwards; } /* スライドをOFFにした時のアニメーション */ @keyframes slideOn { 0% { transform: translateX(0) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(40px) scale(1); } } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。