index.htmlが狂った話 - 合法SESおじさんがPGを目指す日記

こんばんは。瀬野です。

緊急事態です。

f:id:senobro:20170503200937p:plain

作ってるページが狂いました。

ちなみに今のコードです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Cosmos</title>
	<link rel="stylesheet" href ="cosmos_style.css" href="text/css">
	</style>
</head>
<body>
<!-- コンテナ -->
	<div id = "container">
	<!-- ヘッダ -->
	<header>
		<h1>Cosmos</h1>
		<p>宇宙の神秘に触れてみよう</p>
	</header>
	<!-- コンテンツ -->
	<div id = "content">
	<!-- メニュー -->
	<nav>
		<ul id="menu">
			<li><a href="./toppage.html" target="maincontent">トップページ</a></li>
			<li><a href="./profile.html"　target="maincontent">プロフィール</a></li>
			<li><a href="./planets.html" target="maincontent">太陽系の惑星</a></li>
			<li><a href="./moonlight2.html" target="maincontent">月の光</a></li>
			<li><a href="./my_favorite.html" target="maincontent">リンク</a></li>
		</ul>
	</nav>
		<!-- メインコンテンツ -->
		<main class="inline">
			<iframe id="maincontent" name="maincontent" src="./toppage.html">
			</iframe>
		</main>
	</div>
		<!-- フッタ -->
		<footer>
			<hr>
			<p>Copyright (C) Seno nanigashi, All rights reserved.</p>
		</footer>
	</div>
</body>
</html>

以下、バグった原因のページ（コピペして入れ込んだのが原因）
toppage.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Cosmos</title>
	<link rel="stylesheet" href ="cosmos_style.css" href="text/css">
	</style>
</head>
<body>
<!-- コンテナ -->
	<div id = "container">
	<!-- ヘッダ -->
	<header>
		<h1>Cosmos</h1>
		<p>宇宙の神秘に触れてみよう</p>
	</header>
	<!-- コンテンツ -->
	<div id = "content">
	<!-- メニュー -->
	<nav>
		<ul id="menu">
			<li><a href="./toppage.html" target="maincontent">トップページ</a></li>
			<li><a href="./profile.html"　target="maincontent">プロフィール</a></li>
			<li><a href="./planets.html" target="maincontent">太陽系の惑星</a></li>
			<li><a href="./moonlight2.html" target="maincontent">月の光</a></li>
			<li><a href="./my_favorite.html" target="maincontent">リンク</a></li>
		</ul>
	</nav>
		<!-- メインコンテンツ -->
		<main class="inline">
			<iframe id="maincontent" name="maincontent" src="./toppage.html">
			</iframe>
			<section>
				<h2>Cosmosについて</h2>
				<p>太古の昔から、人類は夜瞬く星々を見て様々なことを考えてきました。この宇宙には果てがあるのか。この宇宙はいつ始まったのか。宇宙の星々には我々と同じような生命体が存在するのか。そして、われわれとは何なのか。現代科学の発達によって、宇宙に関する知識は100年前とは比べようもないほど豊かになりました。しかし一方で、精密な観測の結果により、ダークマターの存在や宇宙の加速膨張など、現代科学では説明のつかないことも現れてきています。宇宙は、人類にとっていつまでも神秘に満ちた探求の対象であるに違いありません。</p>
				<p>このサイトでは、こうした宇宙に関する様々な話題を取り上げていきます。</p>
			</section>
		</main>
	</div>
		<!-- フッタ -->
		<footer>
			<hr>
			<p>Copyright (C) Seno nanigashi, All rights reserved.</p>
		</footer>
	</div>
</body>
</html>

見る人が見ればぶん殴られると思うのですが、コンテナからメインコンテンツ直前まで全部要らない子ですね。

修正します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Cosmos</title>
	<link rel="stylesheet" href ="cosmos_style.css" href="text/css">
</head>
<body>
	<!-- メインコンテンツ -->
	<main>
		<section>
			<h2>Cosmosについて</h2>
			<p>太古の昔から、人類は夜瞬く星々を見て様々なことを考えてきました。この宇宙には果てがあるのか。この宇宙はいつ始まったのか。宇宙の星々には我々と同じような生命体が存在するのか。そして、われわれとは何なのか。現代科学の発達によって、宇宙に関する知識は100年前とは比べようもないほど豊かになりました。しかし一方で、精密な観測の結果により、ダークマターの存在や宇宙の加速膨張など、現代科学では説明のつかないことも現れてきています。宇宙は、人類にとっていつまでも神秘に満ちた探求の対象であるに違いありません。</p>
			<p>このサイトでは、こうした宇宙に関する様々な話題を取り上げていきます。</p>
		</section>
	</main>
</body>
</html>