インラインフレーム<iframe> の作成
インラインフレームの作成には「iframe タグ」を使います。
iframe タグのsrc 属性にリンク先のURL を設定することで
ページ内のフレームに別ページを表示することができます。
01 フレーム内に表示するページを作る「top.html」
まずは最初から表示されているページ「top.html」を作る
タイトル、写真を入れます（青文字部分）
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>フルーツ</title>
</head>
<body>
<img src="img/fruit.jpg" alt="フルーツ">
</body>
</html>
02 フレーム内に表示するページを作る「strawberry.html」
イチゴのページ「strawberry.html」を作る
タイトル、写真を入れます（青文字部分）
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>フルーツ</title>
</head>
<body>
<h2>イチゴ</h2>
<p><img src="img/ichigo.jpg" alt="イチゴ"></p>
<p>おいし～いイチゴ！</p>
</body>
</html>
03 フレーム内に表示するページを作る「orange.html」
オレンジのページ「orange.html」を作る
タイトル、写真を入れます（青文字部分）
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>フルーツ</title>
</head>
<body>
<h2>みかん</h2>
<p><img src="img/mikan.jpg" alt="みかん"></p>
<p>冬のくだもの<br>
日本人が大好きなフルーツです</p>
</body>
</html>
04 トップページを作る「index.html」
スタイルシート「fruit.css」をリンクさせる
見出し「h1」を入れる
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>フルーツ</title>
<link href="fruit.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>フルーツ </h1>
</body>
</html>
05 スタイルシートを確認する「fruit.css」
CSS
body{
font-family: sans-serif;
font-size: 16px;
}
.container {
margin:0 auto;
max-width: 700px;
background-color: beige;
padding: 20px 50px;
border-radius:20px;
}
/* インラインフレーム */
iframe{
width:500px;
height: 500px;
}
06 コンテナーのCSSを入れる
テキストや画像が左に並んでしまうので、センター設定してあるコンテナーの中に入れます
HTML
<body>
<div class="container">
<h1>フルーツ </h1>
</div>
</body>
07 リストを作る
メニューリンクはリストを使って入れる
HTML
<body>
<div class="container">
<h1>フルーツ </h1>
<ul>
<li>TOP</li>
<li>いちご</li>
<li>みかん</li>
</ul>
</div>
</body>
08 リストにリンクを作る
リストにリンクを付けます。
iframeに名前「ｆｆ」を付ける予定なので、「targer="ff"」をリンクに追加する
HTML
<body>
<div class="container">
<h1>フルーツ </h1>
<ul>
<li><a href="top.html" target="ff">TOP</a></li>
<li><a href="strawberry.html" target="ff">いちご</a></li>
<li><a href="orange.html" target="ff">みかん</a></li>
</ul>
</div>
</body>
09 インラインフレームの設定
スペースが欲しいので「<br>」を入れてから
その下にインラインフレームを設定
※最初にtop.htmlを表示しておきます
HTML
<body>
<div class="container">
<h1>フルーツ </h1>
<ul>
<li><a href="top.html" target="ff">TOP</a></li>
<li><a href="strawberry.html" target="ff">いちご</a></li>
<li><a href="orange.html" target="ff">みかん</a></li>
</ul>
<br>
<iframe src="top.html" name="ff" frameborder="0"></iframe>
</div>
</body>
10 「h1」のデザインをする／スタイルシート「fruit.css」
自由にデザインしてみよう。
CSS
h1 {
color: #ff8c00;
text-align: center;
font-weight:bold;
}
11 リストをボタンのようにする
メニューリストもデザインしてみよう
以下のCSSは「ボタン、リストデザイン」の「tiger」をアレンジしています（クラス名は「menu」に変更しています）
CSS
.menu {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}
.menu li a {
display: block;
padding: 5px 15px;
color: #ffffff;
text-decoration: none;
text-align: center;
background: #9acd32;
margin: 5px;
border-radius: 5px;
}
.menu li a:hover {
background: #6b8e23;
}
HTML
<ul class="menu">
<li><a href="top.html" target="ff">TOP</a></li>
<li><a href="strawberry.html" target="ff">いちご</a></li>
<li><a href="orange.html" target="ff">みかん</a></li>
</ul>