消えていく幻影

ミッション：ボタンを押すと幻影が現れて、2秒後に自動で消えるようにしよう！

コードを写そう

HTMLタブに下のコードを貼り付けてください。

html

<button id="summonBtn">幻影を召喚</button>
<div id="stage"></div>

CSSタブに下のコードを貼り付けてください。

css

.phantom {
  display: inline-block;
  padding: 10px 20px;
  background: purple;
  color: white;
  margin: 5px;
  border-radius: 8px;
}

JSタブに下のコードを貼り付けてください。

const btn = document.querySelector('#summonBtn');
const stage = document.querySelector('#stage');

btn.addEventListener('click', function() {
  const phantom = document.createElement('div');
  phantom.textContent = '👻 幻影';
  phantom.classList.add('phantom');
  stage.appendChild(phantom);

  setTimeout(function() {
    phantom.remove();
  }, 2000);
});

ボタンを押すと幻影が現れ、2秒後に自動で消えることを確認してください。

コードを読み解こう

要素を作って追加する

const phantom = document.createElement('div');
phantom.textContent = '👻 幻影';
phantom.classList.add('phantom');
stage.appendChild(phantom);

ここでは「時間が来たら自動で消す」ようにします。

`setTimeout`：タイマーを仕掛ける

setTimeout(function() {
  phantom.remove();
}, 2000);

setTimeout(関数, 時間) は「N ミリ秒後にこの関数を実行してください」という予約です。

値	意味
`function() { phantom.remove(); }`	時間が来たら実行する処理
`2000`	2000ミリ秒 = 2秒後

ミリ秒と秒の関係：

plaintext

1000ミリ秒 = 1秒
2000ミリ秒 = 2秒
500ミリ秒  = 0.5秒

全体の流れをまとめると

plaintext

1. createElement('div') → 幻影を工作する
2. textContent = '...'  → 文字を書く
3. classList.add(...)   → 服（スタイル）を着せる
4. stage.appendChild()  → 舞台に出す（画面に表示される）
5. setTimeout(2000)     → 「2秒後に消せ」と予約する
   ↓（2秒経過）
6. phantom.remove()     → 幻影を消す

改造しよう

ミッション①：消えるまでの時間を変えよう

変える場所は1行だけです。

setTimeout(function() {
  phantom.remove();
}, 2000);  ← ここの数字を変える

2000 を変えてみましょう。

1000 にすると何秒後に消える？
500 にすると？
5000 にすると？

ミッション②：幻影のデザインを変えよう

CSSの .phantom の中身を変えると、幻影の見た目が変わります。

css

.phantom {
  background: purple;  ← 色を変える
  color: white;        ← 文字の色を変える
}

チェックしてみよう

[ ] ボタンを押すと幻影が現れる
[ ] 一定時間後に幻影が自動で消える
[ ] setTimeout を使っている