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. テキストエディタ(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入門
  30. Pythonのtkinterを使って、ウィンドウを表示してみよう!
  31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

スポンサードリンク

関連コンテンツ

オススメ記事

文字を一文字ずつ表示してみよう!

【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それをも

メインループを作ってみよう!

【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 突然《とつぜん》ですが、ゲーム開発《かいはつ》の基本として大切なことってなんだっ

【初心者向け】webpack入門。すぐに使える最も簡単な使い方

webpackは、複数のJavaScriptファイルをまとめてくれる、モジュールバンドラというものです。 今回は、webpack入門ということで、webpack5の使い方を紹介していきたいと思

Pythonでrandomを使う。乱数の生成やランダムに選択する関数まとめ

今回は、Pythonでランダムな数値を生成したり、リストのなかからランダムに選択、リストの順番をシャッフルする方法など、randomモジュールで使える関数をまとめました。 しっかり覚えて、目的

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カード」と

クイックタグ

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

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

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げ

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方

みなさんこんにちは。今日も楽しくプログラミングを学んでいきましょう! これまでの講座《こうざ》で、JavaScript《ジャバスクリプト》によるゲーム開発《かいはつ》の方法が、なんとなくでも分

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

メールアドレスが公開されることはありません。