大きくなれ

「大きくなれ」

ミッション：絵文字をクリックするたびにどんどん大きくなる装置をつくろう！

コードを写そう

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

html

<p id="emoji">🐣</p>

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

css

#emoji {
  font-size: 40px;
  cursor: pointer;
}

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

const emoji = document.querySelector('#emoji');
let size = 40;

emoji.addEventListener('click', function() {
  size = size + 10;
  emoji.style.fontSize = size + 'px';
});

絵文字をクリックするたびにサイズが大きくなることを確認してください。

コードを読み解こう

`let size = 40`：現在のサイズを黒板に書く

let size = 40;

CSSで font-size: 40px と指定しているので、最初のサイズに合わせて 40 を黒板に書いておきます。「数を刻む石板」の let count = 0 と同じ考え方で、現在の状態を変数に記憶しています。

`size = size + 10`：黒板の数字を10増やす

size = size + 10;

「数を刻む石板」で count = count + 1 と書いたのと同じパターンです。クリックするたびに size が 40 → 50 → 60 → ... と増えていきます。

`emoji.style.fontSize = size + 'px'`：サイズを画面に反映する

emoji.style.fontSize = size + 'px';

style.fontSize でJavaScriptからCSSの font-size を直接変更できます。値は文字列で指定する必要があるため、数値の size に 'px' を足して '50px' のような文字列を作っています。

改造しよう

ミッション①：1クリックで大きくなる量を変えよう

size = size + 10;  ← 「10」を変える

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