本日の教材

配布プリントのプログラムの実行

■CSSによる子要素の配置と移動

1.4.1　ボタンの表示位置を指定（CSS）
1.4.2　ボタンを親要素の中で移動［瞬時］（CSS）
1.4.2　ボタンを親要素の中で移動［時間をかけて］（CSS）
1.4.3　プロパティの追加、変更（JavaScript）

■「モグラたたき」の開発手順

ボタンで作るモグラのキャラ（CSS）
モグラの配置と上下運動（CSS）
モグラを一定間隔で上下運動
一定時間が経過したらモグラの上下運動停止
モグラをクリックしたら加点

9匹のモグラの表示

9匹のモグラたたき

スタートボタン設置［完成］

■実習問題の素材画像

実習の解答例

実習3　スピードの選択肢を追加　回答例
実習4　モグラの数を増量（9→16）　回答例
実習5a　画像を用いたモグラたたき　回答例
実習5b　画像を用いたモグラたたき（カーソルをハンマーに）　回答例