HTMLタブに下のコードを貼り付けてください。
<button id="colorBtn">呪いをかけろ</button>
<div id="box"></div>
CSSタブに下のコードを貼り付けてください。
#box {
width: 120px;
height: 120px;
background: #ccc;
transition: background 0.3s;
}
.cursed {
background: purple !important;
}
JSタブに下のコードを貼り付けてください。
const btn = document.querySelector('#colorBtn');
const box = document.querySelector('#box');
btn.addEventListener('click', function() {
box.classList.toggle('cursed');
});
ボタンをクリックして、箱が紫色になったり元に戻ったりすることを確認してください。
D-01で学んだ「名札と呼びかけ」の仕組みはD-02でも同じです。ここでは新しく登場したCSSとJSの連携を読み解きましょう。
.cursed：服のデザインを定義する.cursed {
background: purple !important;
}
.cursed は「cursed という名前の服のデザイン」を定義しています。この定義だけではまだ何も起きません。「こういう見た目の服がある」と宣言しているだけです。
classList.toggle('cursed')：服を着たり脱いだりするbox.classList.toggle('cursed');
classList.toggle('cursed') は「box（箱）に cursed という服を着せたり、すでに着ていたら脱がせたりする」という命令です。
ボタンを押すたびに「着る → 脱ぐ → 着る → 脱ぐ」と繰り返すので、色がトグル（切り替え）します。
CSSとJSの対応関係はこうなっています：
.cursed { background: purple; } ← 「cursed」という服のデザイン
classList.toggle('cursed') ← 「cursed」という服を着たり脱いだりする
CSSとJSで cursed という名前が一致していることが大切です。
CSSの .cursed の中の background の値を変えるだけで、色を変えられます。
変える場所はここです：
.cursed {
background: purple !important; ← ここの「purple」を変える
}
purple の部分を好きな色の英語名に変えてみましょう。
例：red（赤）、blue（青）、green（緑）、orange（オレンジ）
.cursed の中に1行追加するだけで、箱を丸くできます。
background: purple !important; の行のすぐ下に、下の1行を追加してください。
border-radius: 50%;
追加後のCSSはこうなります：
.cursed {
background: purple !important;
border-radius: 50%; ← ここを追加した
}