【Web】HTMLにタイトルを表示させる(Web勉強記 10日目)

投稿日：2020年7月13日

最終更新日：2020年7月13日

HTMLにタイトルを表示させる

今までつくってきたWebおみくじだが、なんか寂しいな～と思ったらタイトルが無い。タイトルというのはWebブラウザのタブなどに表示される文字。

今はアドレスがそのまま表示されているが、今回はここに「ネズミおみくじ」と表示させてみる。

作業はいたって簡単で、HTMLのheadタグ内にtitleタグを追加して、表示させたいタイトルを書くだけ。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>ネズミおみくじ</title>
	<link rel = "stylesheet" href = "omikuji_element_center.css"/>
	<script src="tryFortune.js">
	</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>
	<p id = "date"></p>
	</div>
	</body>
	</html>

<title>ネズミおみくじ</title>が今回追加した部分。また、ついでに<meta charset=”utf-8″ />というメタタグを追加した。これは、ページの文字コードを「UTF-8」に指定するもの。日本語ページの場合入れておけば文字化けなど起こらないので安心。

これを表示させたのが以下のページ。ブラウザのタブを見ると「ネズミおみくじ」と表示されている。

Webページは以下のgithub pagesのweb_omikuji_titleから見ることができる。

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

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

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