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;
}
 

 


参考サイト