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

山田

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

アル

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

りこ

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

山田

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

りこ

うん! 楽しみ!

アル

うん!

このシリーズの一覧はこちら

小学生からのJavaScript入門

  1. テキストエディタ(Visual Studio Code)をインストールしてみよう! 小学生からのプログラミング入門
  2. Visual Studio Codeを日本語化してみよう! 小学生からのプログラミング入門
  3. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  4. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  5. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  6. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  7. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  8. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  9. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  10. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  11. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  12. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  15. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  16. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  18. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  19. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  20. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  21. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

小学生からのプログラミング入門

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

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テストです

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。管理画面をカスタマイズするこ

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

java

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

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

M1 Mac対応。DockerでWordPress開発環境を構築する方法

みなさんこんにちは。@It_is_Rです。 ローカルにWordPressの開発環境を作りたいとき、Dockerを使うと、とても簡単に構築することができます。しかし、実際に運営しているWordP

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

enchant.js100行未満!!本格シューティングゲーム作り方

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてし

【Unity】開発したゲームをAndroidで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。 さて、今回はUnityで開発したゲームをAndroidで実機テストする方法です。Unity上で再生したときは動いていたゲームも、

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボタング

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

コメントを残す(コメントは承認後に反映されます)

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