隠れ身の術

「隠れ身の術」

ミッション：ボタンを押すと絵文字が消え、もう一度押すと現れる装置をつくろう！

コードを写そう

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

<p id="emoji">🧙</p>
<button id="btn">術をかける</button>

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

#emoji {
  font-size: 60px;
  transition: opacity 0.3s;
}

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

const emoji = document.querySelector('#emoji');
const btn = document.querySelector('#btn');
let isVisible = true;

btn.addEventListener('click', function() {
  if (isVisible) {
    emoji.style.opacity = '0';
    isVisible = false;
  } else {
    emoji.style.opacity = '1';
    isVisible = true;
  }
});

ボタンをクリックするたびに絵文字が消えたり現れたりすることを確認してください。

コードを読み解こう

let isVisible = true：表示状態を黒板に書く

let isVisible = true;

「今見えているかどうか」を isVisible という黒板に書いておきます。最初は見えているので true です。「色変わり石」の isRed と同じパターンです。

style.opacity で透明にする

emoji.style.opacity = '0';  // 完全透明（見えない）
emoji.style.opacity = '1';  // 不透明（見える）

opacity は透明度を表すCSSプロパティです。0 が完全透明、1 が完全不透明です。display: none と違い、スペースを保ったまま見えなくなります。

CSSの transition: opacity 0.3s

transition: opacity 0.3s;

「色を操る呪文」で学んだ transition と同じです。opacity の変化を0.3秒かけてなめらかに行います。

改造しよう

ミッション①：絵文字を変えよう

<p id="emoji">🧙</p>  ← 絵文字を変える

ミッション②：アニメーションの速さを変えよう

transition: opacity 0.3s;  ← 「0.3s」を変える

数字を大きくするとゆっくり消え、小さくすると素早く消えます。

自己チェック

• [ ] ボタンを押すと絵文字が消える
• [ ] もう一度押すと絵文字が現れる
• [ ] let isVisible で表示状態を管理している
• [ ] style.opacity を使っている