1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。

前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScriptをつかって、今月の残りの日数を調べる方法を紹介しました。

今回は、ゲーム開発かいはつへ、もう一歩んで、JavaScriptジャバスクリプト画像がぞう表示ひょうじする方法を学んでいきます。

また、画像の移動について知りたい場合は、次回の記事「JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門」をご覧ください。

アル

うーん……

りこ

あ、アル。プログラムの勉強は進んだ?

アル

あ、りこちゃん。やっぱりゲームなんだから画像がぞう表示ひょうじさせたいんだけど、やり方が分からないんだ

りこ

それなら山田先生にききに行きましょ!

目次
  1. プロローグ
  2. 今回使う画像がぞうと、その保存場所ほぞんばしょについて
  3. HTMLで画像がぞう表示ひょうじしてみよう
  4. JavaScriptジャバスクリプト画像がぞう表示ひょうじしてみよう
  5. まとめ

プロローグ

アル

先生! また来たよ

りこ

来ちゃった

山田

おう、アルくん、りこちゃん。よく来たべな

アル

ねぇ、JavaScriptジャバスクリプト画像がぞう表示ひょうじさせたいんだけど、どうやるの?

りこ

ゲームに画像を使いたいんだって

山田

そうだべか……じゃあ今日は、画像の表示についてくわしく教えていくべ

今回使う画像がぞうと、その保存場所ほぞんばしょについて

では、まずは、今回使う画像がぞうその保存場所ほぞんばしょについてです。

山田

もし、表示したい画像が手元にない場合は、こちらを使って欲しいんだべ
りこちゃんのドット絵画像だべ

りこ
りこ

きゃー! 私がちっちゃくなっちゃった

山田

この画像を右クリックして、「名前を付けて画像を保存」で保存するべ

りこ

どこに保存すればいいかな……

山田

今回はシンプルに、次のように保存してほしいんだべ

game/
├ index.html
└ rico.png
りこ

えっと、gameフォルダを作って、その中にrico.pngファイルを保存すればいいのね!

山田

そうだべ。そして画像と同じ場所に、index.htmlファイルも作っておいてほしいんだべ

HTMLで画像がぞう表示ひょうじしてみよう

さて、JavaScriptジャバスクリプト画像がぞう表示ひょうじさせていきたいのですが、そのまえに、HTMLエイチティーエムエルでの画像を表示させる方法を学んでおきましょう。

山田

まずはHTMLで画像を表示するほうほうだべ
そのやり方はもう知ってるべよ、って人は、ここは飛ばしても大丈夫だべよ

画像を表示させるためのHTMLタグは、<img>です。
画像のファイル名が「rico.png」の場合は、このようにします。

<img src="rico.png">
山田

このsrcってとこに、画像ファイルまでのパスを入力するんだべ

アル

パスってなぁに?

りこ

あれじゃない? バスケとかで……

アル

ああ、ボールを渡すんだ!

山田

てやんでぇ、べらぼうめ! そのパスじゃないべよ!

りこ

え、ちがうの?

山田

パスっていうのは、ファイルまでの場所ばしょのことだべ
パスのくわしい書き方は「パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い」を見て欲しいべよ

今回は、index.htmlファイルとrico.pngファイルが同じ場所にあるべから、ただファイル名を入力するだけでOKだべ

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>キャラクターの表示</title>
</head>
<body>
	<img src="rico.png">
</body>
</html>

これでブラウザにりこちゃんの画像が表示されます。

キャラクターの表示
りこ

わたしが表示されたよ!

JavaScriptジャバスクリプト画像がぞう表示ひょうじしてみよう

つづいて、JavaScriptジャバスクリプトによって画像がぞう表示ひょうじする方法です。

山田

こんどはJavaScriptを使って、画像を表示してみるべよ
こんなふうに書くんだべ

document.write( '<img src="rico.png">' );
アル

なんだかむずかしいよ……

りこ

あれ、でもさっきのimgタグが、かっこの中に書かれてるよ!

山田

ふっふっふ、document.write()は、画面に文字などのデータを表示させることができるものだべ
画像を表示させるimgタグを書けば、それが画像としてブラウザに表示されるんだべよ

りこ

へぇ、そうなんだ

index.html

<!DOCTYPE html>
<html>
<head>
 	<meta charset="UTF-8">
	<title>キャラクターの表示</title>
</head>
<body>
	<script>
		document.write( '<img src="rico.png">' );
	</script>
</body>
</html>

index.htmlをブラウザで確認すると、さきほどと同じようにりこちゃんの画像が表示されます。

まとめ

今回はJavaScriptでの、画像の表示のしかたを学びました。
まだ動いたりはしませんが、今後こんご記事きじで自由に移動できる方法も紹介しょうかいしていきます。

山田

今回は画像の表示方法を学んだべよ

アル

やっぱり画像が表示されると楽しいね

りこ

私、方向キーで操作そうさできるようにしたい!

山田

それはまた後日の記事で紹介するから、もう少し待つべよ

りこ

うん! 楽しみ!

アル

うん!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です