第13章：画像に うごきを つけよう

1. どんな うごき？

マウスを 画像に のせる と、画像が 少し 大きく なります。

（スマホでは 画像を タップ すると うごきます）

2. JavaScript の しくみ

マウスが のったり、はなれたり した ときに、CSSの「hovered」という名前を つけたり けしたり します。

// 画像を さがす
const img = document.getElementById('catImg');

// マウスを のせたとき
img.addEventListener('mouseenter', () => {
  img.classList.add('hovered');
});

// マウスを はなしたとき
img.addEventListener('mouseleave', () => {
  img.classList.remove('hovered');
});
  

2.5 CSSで うごきを つける 部分

CSSでは transform: scale() を つかって、画像を 少し 大きく します。

img.sample {
  width: 240px;
  border-radius: 12px;
  transition: transform 0.4s ease; /* ふんわり動く時間 */
}

/* 少し大きく見せる */
img.sample.hovered {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

👆 この部分は、ページの <style> の 中 に 書きます。

3. ポイント

• mouseenter と mouseleave で「マウスが のる／はなれる」を きく。
• classList.add() と classList.remove() で クラス（デザイン名）を つけたり とったり。
• transform: scale() で 大きく する。
• transition で 動きを なめらか に する。

4. まとめ

• JavaScript は「タイミング」を きいて、クラス を つける・けす。
• CSS は「デザイン（どう変えるか）」を きめる。