こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、「評価機能」をJavaScriptで実装したいと思います。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(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 |
<!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> |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(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 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; 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%; position: absolute; top: 3px; left: 3px; align-items: center; justify-content: center; animation: slideOff 0.3s linear forwards; } .toggle:checked + .label .ball { animation: slideOn 0.3s linear forwards; } @keyframes slideOn { 0% { transform: translateX(0) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(40px) scale(1); } } @keyframes slideOff { 0% { transform: translateX(40px) scale(1); } 50% { transform: translateX(20px) scale(1.2); } 100% { transform: translateX(0) scale(1); } } |
ここまで実装すると以下のようになります。

CSSのkeyframesでアニメーションを実装しているので、この時点で以下のように動きます。
「:checked
」については、初めて出てきましたね。これは、CSS の擬似クラスで、ラジオボタン、 チェックボックス、 オプションボタンなどの要素がチェックされていたり on
の状態にあったりすることを表すそうです。
CSSでもイベントを検知できるみたいですね。
JavaScriptの実装
JavaScriptでは、先ほど作成したToggleボタンの制御を行います。
要素を取得する
画面操作に必要な要素を取得しましょう。
1 2 3 4 5 |
// 要素を取得する const toggles = document.querySelectorAll('.toggle') const good = document.querySelector('#good') const cheap = document.querySelector('#cheap') const fast = document.querySelector('#fast') |
Changeイベントの登録
次は、changeイベントを登録します。これは、Toggleボタンの状態を変更したときに発火するイベントです。
1 2 3 |
// changeイベントの登録 toggles.forEach( toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target))) |
doTheTrick関数は、これから作成します。
トリックをつける
最後にトリックを付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// トリックをつける 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 } } } |
これで完成です。
おわりに
今回は、JavaScriptよりもToggleボタンのアニメーションの実装の方が勉強になりましたね^^
自作アプリにも応用ができそうなので、今度使ってみます。
それでは、また!
JavaScriptまとめ
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 |
// 要素を取得する 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 } } } |
コメントを残す
コメントを投稿するにはログインしてください。