第7.5章：画像に うごきを つけよう（CSS）

1. マウスを のせると…

CSS で 画像を 大きく できます。

2. CSS の しかけ

img.sample {
  width: 240px;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

/* マウスをのせた時 */
img.sample:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

この :hover が「マウスをのせた時」を あらわします。

JavaScriptなしでも うごくので、 とても かんたんです。

3. ポイント

• :hover は「マウスが のっている」状態を あらわす。
• transition は「ゆっくり変わる」ための時間。
• transform: scale() は 画像を 大きくする。

4. まとめ

JavaScriptを 使わなくても、CSSだけで うごきを つける ことが できます。

このあと、JavaScriptを つかう と、クリック や タップ にも 反応 できる ように なります。