【6日でできるHTML入門】インラインフレームの作成
Webページの一部に「別のページ」を埋め込む機能として利用されるのがインラインフレーム（<iframe>）です。
例えば、外部サイトの地図やカレンダー、動画プレーヤーなどを自サイト内に表示したいときに便利です。
以下では、基本的な使い方から応用までを順に解説します。
１．インラインフレームの基本
1.1. タグと src 属性
インラインフレームを設置するには <iframe> タグを使い、表示したいページのURLを src 属性に指定します。
ファイル名： lesson29-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📄 別ページ埋め込みのデモ</title>
</head>
<body>
<h1>📄 特設コンテンツ</h1>
<p>下の枠内に「お知らせページ」を埋め込んでいます。</p>
<iframe src="news.html"></iframe>
</body>
</html>ファイル名： news.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📰 最新ニュース</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}
h1 {
margin-bottom: 15px;
padding: 8px 12px;
background: #0055A4;
color: #fff;
border-radius: 4px;
border-left: 6px solid #002d72;
border-right: 6px solid #002d72;
box-shadow: 2px 2px 6px #888;
font-size: 20pt;
}
ul {
margin: 0;
padding-left: 1.2em;
list-style: disc;
}
li {
margin-bottom: 8px;
}
a {
color: #0055A4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>📰 最新ニュース</h1>
<p>こちらでは当サイトに掲載した最新の更新情報をお届けします。</p>
<ul>
<li><strong>2025/05/01</strong>：1940年代ページにENIACの新写真を追加しました。</li>
<li><strong>2025/04/20</strong>：サイト全体のデザインをリニューアルしました。</li>
<li><strong>2025/04/10</strong>：1960年代ページにPDP-8の解説を強化。</li>
</ul>
<p>過去のニュースは <b>アーカイブ</b> をご覧ください。</p>
</body>
</html>ブラウザの出力例
<iframe>の中身（空白やテキスト）は無視され、外部ページのみが表示されます。
1.2. サイズ指定とCSSによる装飾
フレームの大きさは HTML属性かCSSで指定できます。
CSSで指定する例：
ファイル名： lesson29-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📏 フレームサイズ調整</title>
<style>
iframe {
width:600px; /* 横幅 */
height:400px; /* 高さ */
border:2px solid #0066CC; /* 枠線 */
border-radius:4px; /* 角丸 */
}
</style>
</head>
<body>
<h1>📏 マップ表示</h1>
<iframe src="map.html"></iframe>
</body>
</html>ファイル名： map.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🗺️ 会場アクセスマップ</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #f5f5f5;
}
#container {
width: 800px;
margin: 40px auto;
background: #fff;
border: 3px solid #333;
padding: 20px;
box-sizing: border-box;
}
h1 {
margin-bottom: 20px;
padding: 8px 12px;
background: #0055A4;
color: #fff;
border-radius: 4px;
border-left: 6px solid #002d72;
border-right: 6px solid #002d72;
box-shadow: 2px 2px 6px #888;
font-size: 20pt;
}
p {
margin-bottom: 16px;
}
.map-frame {
width: 100%;
height: 450px;
border: none;
border: 2px solid #333;
border-radius: 4px;
}
@media (max-width: 820px) {
#container {
width: 95%;
}
}
</style>
</head>
<body>
<div id="container">
<h1>🗺️ 会場アクセスマップ</h1>
<p>以下の地図は当イベント会場「東京国際フォーラム」の位置を示しています。最寄り駅からのアクセスもご確認ください。</p>
<iframe
class="map-frame"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.5903794855187!2d139.76493691525825!3d35.681236180191935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b37b3b6bd%3A0xa4a8d1699e6a8321!2z5pel5pys44CB44OH44Ot44OI44K544Ot44OI44Ki44K744OI!5e0!3m2!1sja!2sjp!4v1697041234567!5m2!1sja!2sjp"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
<p>JR有楽町駅・地下鉄千代田線二重橋前駅・地下鉄有楽町線有楽町駅から徒歩5分です。</p>
</div>
</body>
</html>ブラウザの出力例
２．インラインフレームに指定できる属性
よく使う属性をまとめると次の通りです。
| 属性名 | 説明 |
|---|---|
| src | 表示するページのURLを指定 |
| width | フレームの横幅をピクセル単位で指定 |
| height | フレームの高さをピクセル単位で指定 |
| name | フレームに付ける名前。リンクの target として利用 |
| sandbox | セキュリティ制限を設定。例：allow-scripts, allow-same-origin など |
| srcdoc | フレーム内に直接HTML文字列を埋め込む（src と排他） |
| seamless | 枠線を消して親ページに馴染ませる。 |
2.1. 属性指定のサンプル
ファイル名： lesson29-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>⚙️ 属性指定の例</title>
</head>
<body>
<h1>⚙️ アンケートフォーム</h1>
<iframe
src="form.html"
name="surveyFrame"
width="500"
height="300"
sandbox="allow-forms allow-scripts"
seamless>
アンケートを表示できない場合は <a href="form.html">こちら</a> をご覧ください。
</iframe>
</body>
</html>ファイル名： form.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>💻 コンピュータの歴史 ― お問い合わせ</title>
<link rel="stylesheet" href="style.css">
<style>
/* フォーム用追加スタイル */
#main form {
margin-top: 20px;
}
#main label {
display: block;
margin-bottom: 6px;
font-weight: bold;
}
#main input[type="text"],
#main input[type="email"],
#main textarea {
width: 100%;
max-width: 760px;
padding: 8px;
margin-bottom: 16px;
border: 1px solid #333;
border-radius: 4px;
box-sizing: border-box;
}
#main input[type="submit"] {
background: #0055A4;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14pt;
}
#main input[type="submit"]:hover {
background: #002d72;
}
</style>
</head>
<body>
<div id="container">
<header>
<div id="title">💻 コンピュータの歴史 ― お問い合わせ</div>
</header>
<nav>
<ul>
<li><a href="index.html">TOPページ</a></li>
<li><a href="1940s.html">1940年代</a></li>
<li><a href="1960s.html">1960年代</a></li>
<li><a href="1980s.html">1980年代</a></li>
<li><a href="2000s.html">2000年代</a></li>
</ul>
</nav>
<div id="main">
<h1>お問い合わせ</h1>
<p>ご質問やご意見などはこちらのフォームからお送りください。折り返し担当者よりご連絡いたします。</p>
<form action="#" method="post">
<label for="name">お名前</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required>
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="6" required></textarea>
<input type="submit" value="送信する">
</form>
</div>
<footer>
© 2025 Computer History Inc. All rights reserved.
</footer>
</div>
</body>
</html>ブラウザの出力例
３．リンク先をインラインフレーム内に表示
フレームに name 属性を付け、リンクの target にその名前を指定すると、クリック先がフレーム内で開きます。
ファイル名： lesson29-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🔗 フレーム内リンク切替</title>
<style>iframe{width:700px;height:400px;border:1px solid #888;}</style>
</head>
<body>
<h1>ドキュメント閲覧</h1>
<ul>
<li><a href="doc1.html" target="docFrame">ドキュメント1</a></li>
<li><a href="doc2.html" target="docFrame">ドキュメント2</a></li>
<li><a href="doc3.html" target="docFrame">ドキュメント3</a></li>
</ul>
<iframe name="docFrame"></iframe>
</body>
</html>ファイル名： doc1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📄 ドキュメント1</title>
<style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: #0055A4; }
p { line-height: 1.6; }
</style>
</head>
<body>
<h1>ドキュメント1</h1>
<p>
これはサンプルのドキュメント1です。
インラインフレームやリンクの動作確認用にご利用ください。
</p>
<p><a href="doc2.html" target="_self">次のドキュメントへ →</a></p>
</body>
</html>ファイル名： doc2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📄 ドキュメント2</title>
<style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: #009933; }
p { line-height: 1.6; }
</style>
</head>
<body>
<h1>ドキュメント2</h1>
<p>
これはサンプルのドキュメント2です。
「前のドキュメントへ」「次のドキュメントへ」のリンクを貼っています。
</p>
<p>
<a href="doc1.html" target="_self">← 前のドキュメント</a>
｜
<a href="doc3.html" target="_self">次のドキュメント →</a>
</p>
</body>
</html>ファイル名： doc3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📄 ドキュメント3</title>
<style>
body { font-family: sans-serif; padding: 20px; }
h1 { color: #CC3300; }
p { line-height: 1.6; }
</style>
</head>
<body>
<h1>ドキュメント3</h1>
<p>
これはサンプルのドキュメント3です。
他ページへのリンクをテストしたら、ここで完了です。
</p>
<p><a href="doc1.html" target="_self">← 最初のドキュメントへ戻る</a></p>
</body>
</html>ブラウザの出力例
４．インラインフレーム内のリンク制御
フレーム内ページのリンクを、親ページ全体に展開するには target="_parent" を使います。
ファイル名： lesson29-5.html
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>サンプル内</title></head>
<body>
<h2>追加情報</h2>
<p>詳細ページはこちら：<a href="detail.html" target="_parent">詳細</a></p>
</body>
</html>ファイル名： detail.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>💻 コンピュータの歴史 ― ENIAC 詳細</title>
<link rel="stylesheet" href="style.css">
<style>
/* ENIAC 詳細用の追加スタイル */
#main h1 {
margin-bottom: 20px;
padding: 10px 14px;
background: #800000;
color: #fff;
border-radius: 4px;
border-left: 6px solid #400000;
border-right: 6px solid #400000;
box-shadow: 2px 2px 6px #666;
font-size: 22pt;
}
#main table {
width: 100%;
max-width: 760px;
margin: 20px auto;
border-collapse: collapse;
}
#main caption {
caption-side: top;
text-align: left;
margin-bottom: 8px;
font-weight: bold;
font-size: 14pt;
}
#main th, #main td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
#main th {
background-color: #DDD;
}
#main img {
display: block;
max-width: 100%;
margin: 20px auto;
border: 2px solid #333;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="container">
<header>
<div id="title">💻 ENIAC 詳細情報</div>
</header>
<nav>
<ul>
<li><a href="index.html">TOPページ</a></li>
<li><a href="1940s.html">1940年代</a></li>
<li><a href="1960s.html">1960年代</a></li>
<li><a href="1980s.html">1980年代</a></li>
<li><a href="2000s.html">2000年代</a></li>
</ul>
</nav>
<div id="main">
<h1>ENIAC（エニアック）</h1>
<p>
ENIACは1946年に完成した世界初期の汎用電子計算機の一つです。
真空管を多数用いた巨大なシステムで、当時としては画期的な性能を誇りました。
</p>
<img src="eniac.png" alt="ENIAC 計算機の全景">
<table>
<caption>ENIAC 主な仕様</caption>
<tr>
<th>項目</th><th>仕様</th>
</tr>
<tr>
<th>開発年</th><td>1943–1946 年</td>
</tr>
<tr>
<th>用途</th><td>弾道計算など軍事用途</td>
</tr>
<tr>
<th>真空管数</th><td>17,468 本</td>
</tr>
<tr>
<th>演算速度</th><td>加算：5,000 回/秒</td>
</tr>
<tr>
<th>消費電力</th><td>約150 kW</td>
</tr>
</table>
<p>
ENIACの成功はその後のコンピュータ設計に大きな影響を与え、
トランジスタ、集積回路を経て現代のPCやスマートフォンへとつながる礎となりました。
</p>
</div>
<footer>
© 2025 Computer History Inc. All rights reserved.
</footer>
</div>
</body>
</html>
ブラウザの出力例
まとめ
<iframe>は外部ページを埋め込む便利な手段- サイズは
width/heightまたは CSS で指定 name＋targetでフレーム内リンクを制御- セキュリティ制限は
sandbox属性で設定可能
必要に応じてスタイルや属性を組み合わせ、ユーザビリティの高い埋め込み表示を実現してください。