【Web】GitHub PagesのHTMLに画像を表示する(Web勉強記 7.5日目)

投稿日：2020年3月25日

最終更新日：2020年3月25日

Github Pagesに画像を表示したい

今回はGithub Pagesで公開しているおみくじに画像をつけてみる。

画像はなんでも良いが、今年の干支はネズミということで、ドット絵のネズミを描いてみた。これをおみくじに表示する。

次に、github pagesで表示しているhtmlファイルを置いてあるローカルのディレクトリにimagesというディレクトリを作成し、先ほどのネズミの絵をimagesに置く。

ちなみにドット絵はEDGEというソフトウェアで描いている。EDGEによるドット絵製作は以下の日記で紹介しているので、興味があればどうぞ。

【Unity】EdgeとUnityでドット絵2Dゲームをつくろう日記

つぎに、HTMLを変更する。前回の日記で作成したweb_omikuji_center.htmlをコピーしてweb_omikuji_image.htmlという名前に変更し、内容を以下のように変更した。

	<!DOCTYPE html>
	<html>
	<head>
	<link rel = "stylesheet" href = "omikuji_element_center.css"/>
	<script>
	function tryFortune() {
	var resultInt = Math.floor(Math.random () * 7)
	switch (resultInt) {
	case 0 : resultText = "大凶"; resultClass = "bad"; break;
	case 1 : resultText = "凶"; resultClass = "bad"; break;
	case 2 : resultText = "末吉"; resultClass = "normal"; break;
	case 3 : resultText = "小吉"; resultClass = "normal"; break;
	case 4 : resultText = "中吉"; resultClass = "good"; break;
	case 5 : resultText = "吉"; resultClass = "good"; break;
	default : resultText = "大吉"; resultClass = "good"; break;
	}
	document.getElementById("result").textContent = resultText;
	document.getElementById("result").className = resultClass;
	console.log(resultClass);
	}
	</script>
	</head>
	<body>
	<div class="main">
	<h1>HTMLとJavaScriptによるWebおみくじ</h1>
	<p><img src="images/mouse.png"></p>
	<button class = "button_omikuji" onclick="tryFortune()">おみくじを引く</button>
	<p id = "result"></p>
	</div>
	</body>
	</html>

変更したのは <p><img src=”images/mouse.png”></p>だけ。相対パスで指定してhtmlと画像ファイルの位置関係を変えなければ、githubにpushしても問題なく画像を表示できる。

あとはgithubにローカルのディレクトリの変更をcommitしてpushするだけ。これで、おみくじに画像を表示することができた。

実際にgithub pagesで公開しているページはこちら。

前回同様、index.htmlに画像ありおみくじへのリンクを追加している。web_omikuji_imageをクリックすれば画像ありのおみくじを表示できる。

今までの勉強記は以下にまとめています。初学者の目線で色々つくったり、試してみたりしてるので、興味があればどうぞ。

【Web】HTML/CSS/JavaScriptでおみくじをつくろう日記

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。