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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  23. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  24. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

スポンサードリンク

関連コンテンツ

オススメ記事

とってもかんたん!iPhoneアプリ開発

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。 この入門ではXcodeを使いますので、

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

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

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

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。 gulp について gulpは、sas

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

キャラを決まった間隔ずつ動かすよ!

【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

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

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