HTML:インラインフレーム
iframe(インラインフレーム)
Character Set を UTF-8 で指定した場合は、HTML ファイルを UTF-8 フォーマットで保存すること。
iframe.htm
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
iframe
</title>
<link rel="stylesheet" type="text/css" href="iframe.css">
</head>
<body>
<iframe src="header.htm" id="header"></iframe>
<div id="frame">
<iframe src="left.htm" id="left"></iframe>
<div id="container">
<iframe src="content.htm" id="content"></iframe>
</div>
<iframe src="right.htm" id="right"></iframe>
</div>
<iframe src="footer.htm" id="footer"></iframe>
</body>
</html>
iframe.css
body {
margin: 0px;
padding: 0px;
}
iframe {
border: none
}
#header {
position: absolute;
top: 0px;
width: 100%;
height: 50px;
}
#frame {
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
}
#left {
position: absolute;
left: 0px;
width: 150px;
height: 100%;
}
#container {
position: absolute;
left: 150px;
right: 150px;
height: 100%;
}
#content {
width: 100%;
height: 100%;
}
#right {
position: absolute;
right: 0px;
width: 150px;
height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
header.htm
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
header
</title>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<h1>
header
</h1>
</body>
</html>
header.css
body {
text-align: center;
background: #888fff;
overflow: hidden;
}
left.htm
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
left
</title>
<link rel="stylesheet" type="text/css" href="left.css">
</head>
<body>
<h1>
left
</h1>
<div id="sidemenu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
</body>
</html>
left.css
body {
text-align: center;
background: #555fff;
overflow: hidden;
}
#sidemenu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#sidemenu li a {
display: block;
margin: 0px;
padding: 0px;
width: 130px;
height: 25px;
color: #000000;
font-family: 'MS Gothic';
font-size: 20px;
font-weight: bold;
text-align: left;
text-decoration: none;
background: gold;
border: 1px solid black;
}
#sidemenu li a:hover {
background: silver;
}
content.htm
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
content
</title>
<link rel="stylesheet" type="text/css" href="content.css">
</head>
<body>
<h1>
content
</h1>
<p>
本文<br>
本文<br>
本文<br>
本文<br>
本文<br>
</p>
</body>
</html>
content.css
body {
//text-align: center;
//background: #888fff;
}
right.htm
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
right
</title>
<link rel="stylesheet" type="text/css" href="right.css">
</head>
<body>
<h1>
right
</h1>
</body>
</html>
right.css
body {
text-align: center;
background: #555fff;
overflow: hidden;
}
footer.htm
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
footer
</title>
<link rel="stylesheet" type="text/css" href="footer.css">
</head>
<body>
<h1>
footer
</h1>
</body>
</html>
footer.css
body {
text-align: center;
background: #888fff;
overflow: hidden;
}
参考サイト