JavaScriptで背景画像を変えてみよう

HTML5+JavaScript+CSSでの「背景画像の変更」を動画にしています。
新規作成から15分で完成を目指しているので、簡略させてもらってます。

 

 

動画で学ぶWebアプリ_背景画像の変更

【 動画リスト 】

前半:新規作成 ( 約9分 )
http://youtu.be/Gr0tEO3Luio

後半:画像の変更 ( 約7分 )
http://youtu.be/9NAAb68J1bM

 

【 使用イラスト 】

動画で学ぶWebアプリ_素材ネコ動画で学ぶWebアプリ_素材トリ動画で学ぶWebアプリ_素材猿動画で学ぶWebアプリ_素材スライム

 

【 学習内容 】

JavaScriptで背景画像を変えてみようボタンクリックで背景画像を変更する。(サンプル)
※ スマートフォンでも動きます。

1.新規作成
– HTMLについて
– 文字コードについて

2.ボタンの表示 (HTML)
– ボタンについて

3.文字サイズの変更 ( CSS )
– CSSとは
– フォントサイズの変更

4.画像の表示 (JavaScript)
– クリック処理
– 画像の表示

 


1.新規作成

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ページタイトル</title>
</head>
<body>
こんにちは!
</body>
</html>

 


2.ボタンの表示 ( HTML )

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" >
	<input type="button" value="トリ" >

</body>
</html>

 


3.文字サイズの変更 ( CSS )

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
	<style>
		/* フォントサイズの変更 */
		input {
        		font-size:40px;
		}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" >
	<input type="button" value="トリ" >

</body>
</html>

 


4.画像の表示 (JavaScript)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景画像を変えてみよう</title>
	<style>
		/* フォントサイズの変更 */
		input {
        		font-size:40px;
		}
	</style>
</head>
<body>

	<!-- ボタンの表示 -->
	<input type="button" value="ネコ" onClick="document.body.style.backgroundImage = 'url(cat.png)';">
	<input type="button" value="トリ" onClick="document.body.style.backgroundImage = 'url(bird.png)';">

</body>
</html>

 

【 クリック処理 補足 】

onClick JavaScriptで背景色を変えてみよう