やりたいこと
以下のようなページを作りたかったので、備忘録です。分かりにくいですが、左のpage1,2,3を押すと、右側の表示内容がpage1.html,page2.html,page3.htmlの内容に切り替わります。
作り方
HTML
navとdivからなるシンプルなページです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
<title>ページ切り替え</title>
</head>
<body>
<nav>
<ul>
<li>
<a target="target" href="page1.html">page1</a>
</li>
<li>
<a target="target" href="page2.html">page2</a>
</li>
<li>
<a target="target" href="page3.html">page3</a>
</li>
</ul>
</nav>
<div class="content">
<iframe src="page1.html" name="target" width="100%" height="100%"></iframe>
</div>
</body>
</html>
iframeの中で表示する内容は以下のようにしています。page2.html,page3.htmlも同様です。
page1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Page 1</title>
</head>
<body>
<h1>Page 1</h1>
<p>ここはPage1です。</p>
</body>
</html>
CSS
iframeの線を消したりしています。
htmlタグとbodyタグのheightを100%にしないと、ブラウザ全体表示になりません。
style.css
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
nav {
margin: 0;
width: 20%;
height: 100%;
float: left;
}
.content {
margin: 0;
width: 80%;
height: 100%;
float: left;
}
ul {
list-style: none;
}
iframe {
border: 0;
}