右へ進め

「右へ進め」

ミッション：絵文字をクリックするたびに右へ進んでいく装置をつくろう！

コードを写そう

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

html

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

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

css

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

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

const emoji = document.querySelector('#emoji');
let pos = 0;

emoji.addEventListener('click', function() {
  pos = pos + 20;
  emoji.style.marginLeft = pos + 'px';
});

絵文字をクリックするたびに右に動くことを確認してください。

コードを読み解こう

`let pos = 0`：現在の位置を黒板に書く

let pos = 0;

最初は左端（0px）にいるので 0 を書いておきます。「大きくなれ」の let size と同じ考え方です。

`pos = pos + 20`：位置を20増やす

pos = pos + 20;

クリックするたびに pos が 0 → 20 → 40 → 60 → ... と増えていきます。

`emoji.style.marginLeft = pos + 'px'`：位置を画面に反映する

emoji.style.marginLeft = pos + 'px';

style.marginLeft でJavaScriptからCSSの margin-left（左の余白）を変更できます。左の余白を増やすことで右に動いているように見えます。

'px' を足す書き方は「大きくなれ」の style.fontSize と同じパターンです。

`display: inline-block` が必要な理由

p タグはそのままだと margin-left が効かない場合があります。display: inline-block を指定することで margin-left が確実に動くようになります。

改造しよう

ミッション①：1クリックで動く距離を変えよう

pos = pos + 20;  ← 「20」を変える

数字を大きくすると速く動き、小さくするとゆっくり動きます。

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