6日でできる 新HTML入門｜iframeタグでページを埋め込む方法

ページの中に、別のページを表示できる。iframeタグを使って、地図・フォーム・資料ページなどを便利に埋め込もう。

Webページを作っていると、ページの一部分に別のページや外部サービスを表示したい場面があります。たとえば、アクセス案内の中に地図を表示したいとき、イベントページに申込みフォームを埋め込みたいとき、資料ページの中に別のHTMLページを表示したいときなどです。

このようなときに使えるのが、iframeタグです。iframeはインラインフレームと呼ばれ、現在表示しているWebページの中に、別のHTMLページや外部サイトの一部を表示するためのタグです。

iframeタグを使うと、親ページの中に小さな表示枠を作り、その中に別ページを読み込めます。表示するページはsrc属性で指定します。自分で作ったHTMLファイルを読み込むこともできますし、地図や動画など、外部サービスが提供している埋め込み用URLを表示することもできます。

ただし、iframeは便利な一方で、サイズ指定、リンクの開き方、セキュリティ設定にも注意が必要です。フレームが小さすぎると内容が見づらくなり、外部ページを読み込む場合は表示制限や安全性の確認も必要になります。

ここでは、iframeタグの基本、サイズ指定、よく使う属性、name属性とtarget属性を使ったリンクの切り替え、フレーム内リンクの制御までを、サンプルHTMLと一緒に順番に解説します。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。

embed-page-iframeダウンロード
cearly-computer.png

iframeタグの基本

iframeタグは、ページ内に別のページを埋め込むためのタグです。基本の形は、iframeタグにsrc属性を指定します。

<iframe src="info-page.html"></iframe>

src属性には、表示したいHTMLファイルやURLを書きます。この例では、info-page.htmlという別ページをiframeの中に表示します。

iframeタグで使う基本の考え方

項目内容
iframe別ページを表示する枠を作る
srciframe内に表示するページのURLやファイル名を指定する
widthiframeの横幅を指定する
heightiframeの高さを指定する
CSS枠線、角丸、余白などの見た目を整える

iframeタグの中に文章を書いても、通常はsrcで指定したページが表示されます。iframeに対応していない環境や、何らかの理由で表示できない場合の補足として、iframeタグの中に代替テキストやリンクを書くことがあります。

図1：iframeで別ページを埋め込む仕組み

この図から分かること

iframeタグを使うと、親ページの中に別ページを表示する枠を作れます。src属性で読み込むHTMLファイルやURLを指定すると、そのページがiframe内に表示されます。お知らせ欄、地図、フォーム、資料ビューアのように、ページの一部だけ別コンテンツとして表示したいときに便利です。

別ページをiframeで表示する

まずは、親ページの中にお知らせページを埋め込む例を見ていきましょう。親ページではiframeタグを使い、src属性でsite-news.htmlを指定します。

ファイル名： Lesson29-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>別ページ埋め込みのデモ</title>
</head>
<body>
  <h1>特設コンテンツ</h1>
  <p>下の枠内に、お知らせページを埋め込んでいます。</p>

  <iframe src="site-news.html"></iframe>
</body>
</html>

ファイル名： site-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-color: #0055A4;
      color: #FFFFFF;
      border-radius: 4px;
      border-left: solid 6px #002D72;
      border-right: solid 6px #002D72;
      box-shadow: 2px 2px 6px #888888;
      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>2026/07/01</strong>：HTML基礎ページに表の練習問題を追加しました。</li>
    <li><strong>2026/06/20</strong>：CSSレイアウトの解説を更新しました。</li>
    <li><strong>2026/06/10</strong>：リストタグのサンプルを追加しました。</li>
  </ul>

  <p>過去のお知らせは <b>アーカイブページ</b> をご覧ください。</p>
</body>
</html>

ブラウザの表示例

この例では、Lesson29-1.htmlが親ページ、site-news.htmlがiframe内に表示されるページです。親ページのiframeタグにsrc="site-news.html"を指定しているため、ブラウザではLesson29-1.htmlの中にsite-news.htmlの内容が表示されます。

iframeは、別のHTMLファイルをそのまま読み込むため、site-news.html側にも通常のHTML構造を書けます。head、title、style、bodyなどを持つ1つの独立したHTMLページとして作成できます。

ただし、iframeの初期表示はサイズが小さく見えることがあります。内容を読みやすく表示するには、widthやheight、borderなどを指定して、表示枠を整えることが大切です。

iframeのサイズと見た目をCSSで整える

iframeは、CSSで横幅、高さ、枠線、角丸などを指定できます。表示枠が小さすぎると中のページが見づらくなるため、用途に合わせてサイズを調整しましょう。

iframe {
  width: 600px;
  height: 400px;
  border: solid 2px #0066CC;
  border-radius: 4px;
}

widthは横幅、heightは高さを指定します。borderを指定するとiframeの枠線を表示できます。border-radiusを使うと、枠の角を丸くできます。

iframeの見た目でよく使うCSS

CSS役割
widthiframeの横幅を指定する
heightiframeの高さを指定する
borderiframeの枠線を指定する
border-radiusiframeの角を丸くする
display表示形式を指定する
marginiframeの外側余白を指定する

iframeのサイズは、HTML属性のwidthやheightでも指定できますが、見た目をまとめて管理したい場合はCSSで指定するほうが扱いやすくなります。

地図ページをiframeで表示する

次の例では、親ページに会場案内ページを埋め込みます。親ページ側でiframeのサイズや枠線をCSSで指定し、iframeの中にvenue-map.htmlを表示します。

ファイル名： Lesson29-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フレームサイズ調整</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    iframe {
      width: 640px;
      height: 580px;
      border: solid 2px #0066CC;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <h1>会場案内ページ</h1>
  <p>下の枠内に、会場アクセス情報を表示しています。</p>

  <iframe src="venue-map.html"></iframe>
</body>
</html>

ファイル名： venue-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-color: #F5F5F5;
    }

    #container {
      width: 760px;
      margin: 30px auto;
      background-color: #FFFFFF;
      border: solid 3px #333333;
      padding: 20px;
      box-sizing: border-box;
    }

    h1 {
      margin-bottom: 20px;
      padding: 8px 12px;
      background-color: #0055A4;
      color: #FFFFFF;
      border-radius: 4px;
      border-left: solid 6px #002D72;
      border-right: solid 6px #002D72;
      box-shadow: 2px 2px 6px #888888;
      font-size: 20pt;
    }

    p {
      margin-bottom: 16px;
      line-height: 1.6;
    }

    .map-box {
      height: 220px;
      border: solid 2px #333333;
      border-radius: 6px;
      background-color: #E3F2FD;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: #0055A4;
      margin-bottom: 16px;
    }

    @media (max-width: 780px) {
      #container {
        width: 95%;
      }
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>会場アクセス案内</h1>
    <p>
      こちらはイベント会場へのアクセス案内ページです。
      iframe内に表示しても読みやすいように、余白と枠線を整えています。
    </p>

    <iframe
      class="map-box"
      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>
      最寄り駅から徒歩約5分です。駅の改札を出たら、案内板に沿って中央通り方面へお進みください。
    </p>
  </div>
</body>
</html>

ブラウザの表示例

この例では、Lesson29-2.htmlのiframeにvenue-map.htmlを読み込んでいます。親ページのCSSでiframeの幅、高さ、枠線、角丸を指定しているため、埋め込み枠が見やすくなっています。

venue-map.htmlは、iframeの中に表示される独立したページです。中のページにもCSSを指定できるため、iframeの外枠だけでなく、読み込まれるページ側の見た目も整えられます。

実際のWeb制作では、地図サービスが提供する埋め込み用iframeコードを貼り付けることもあります。その場合も、width、height、border、loadingなどの属性を確認し、ページに合うサイズに調整することが大切です。

図2：iframeのサイズと枠線をCSSで整える

この図から分かること

iframeは、CSSで横幅、高さ、枠線、角丸を指定できます。表示枠のサイズを整えることで、埋め込んだページの内容が見やすくなります。iframeの外枠は親ページ側で調整し、iframe内に表示されるページの見た目は読み込まれるHTML側で整えることができます。

iframeでよく使う属性

iframeタグには、src以外にもいくつかの属性を指定できます。サイズや名前、セキュリティ、読み込み方法などを調整できます。

iframeの主な属性

属性役割
srciframe内に表示するページのURLを指定する
widthiframeの横幅を指定する
heightiframeの高さを指定する
nameiframeに名前を付け、リンクのtarget先として使う
sandboxiframe内の動作に制限を付ける
srcdociframe内に直接HTMLを書き込む
loadingiframeの読み込みタイミングを指定する
referrerpolicy参照元情報の送信方法を指定する
allowfullscreen全画面表示を許可する

sandbox属性は、iframe内で実行できる機能を制限するための属性です。外部コンテンツを読み込む場合は、安全性を考えるうえで重要です。たとえば、フォーム送信を許可する場合はallow-forms、スクリプトを許可する場合はallow-scriptsのように指定します。

srcdoc属性は、srcで別ファイルを読み込む代わりに、iframe内に直接HTML文字列を書きたいときに使います。ただし、通常の学習では、まずsrcで別ファイルを読み込む方法から覚えると分かりやすいです。

属性を指定してフォームを表示する

次の例では、iframeにname、width、height、sandboxを指定し、問い合わせフォームページを読み込みます。

ファイル名： Lesson29-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>属性指定の例</title>
</head>
<body>
  <h1>アンケートフォーム</h1>
  <p>下の枠内に、アンケートフォームを表示しています。</p>

  <iframe
    src="survey-form.html"
    name="surveyFrame"
    width="560"
    height="570"
    sandbox="allow-forms allow-scripts">
    アンケートを表示できない場合は <a href="survey-form.html">こちら</a> をご覧ください。
  </iframe>
</body>
</html>

ブラウザの表示例

ファイル名： survey-form.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: #F7F7F7;
    }

    h1 {
      margin-bottom: 16px;
      padding: 8px 12px;
      background-color: #0055A4;
      color: #FFFFFF;
      border-radius: 4px;
      font-size: 20pt;
    }

    form {
      margin-top: 16px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    textarea {
      width: 100%;
      max-width: 500px;
      padding: 8px;
      margin-bottom: 14px;
      border: solid 1px #333333;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type="submit"] {
      background-color: #0055A4;
      color: #FFFFFF;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14pt;
    }

    input[type="submit"]:hover {
      background-color: #002D72;
    }
  </style>
</head>
<body>
  <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="5" required></textarea>

    <input type="submit" value="送信する">
  </form>
</body>
</html>

ブラウザの表示例

この例では、Lesson29-3.htmlのiframeにsurvey-form.htmlを表示しています。widthとheightをHTML属性として指定しているため、iframeの表示サイズが決まります。

name="surveyFrame"は、iframeに名前を付ける指定です。あとでリンクのtarget属性と組み合わせると、リンク先をこのiframe内に表示できます。

sandbox="allow-forms allow-scripts"は、iframe内で許可する機能を指定しています。sandboxを指定すると、iframe内の動作には制限がかかります。フォーム送信を許可したい場合はallow-formsを指定します。スクリプトを動かしたい場合はallow-scriptsを指定します。ただし、外部コンテンツを読み込む場合は、必要以上に許可を広げないことが大切です。

name属性とtarget属性でiframe内の表示を切り替える

iframeにname属性を付けると、リンクのtarget属性からそのiframeを指定できます。これにより、リンクをクリックしたときに、親ページ全体を移動させず、iframeの中だけを切り替えることができます。

基本の形は次の通りです。

<a href="guide-1.html" target="guideFrame">ガイド1</a>

<iframe name="guideFrame"></iframe>

aタグのtargetに、iframeのnameと同じ名前を指定します。この例では、リンクをクリックするとguide-1.htmlがguideFrameという名前のiframe内に表示されます。

nameとtargetの関係

指定する場所書き方役割
iframename="guideFrame"iframeに名前を付ける
atarget="guideFrame"リンク先を指定したiframe内に開く

この方法は、資料ビューア、メニュー切り替え、ヘルプページの表示などに使えます。

リンク先をiframe内に表示する

次の例では、左側にドキュメントリンクを並べ、クリックしたページをiframe内に表示します。

ファイル名： Lesson29-4.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フレーム内リンク切替</title>
  <style>
    body {
      font-family: sans-serif;
      line-height: 1.7;
    }

    iframe {
      width: 720px;
      height: 420px;
      border: solid 1px #888888;
    }
  </style>
</head>
<body>
  <h1>学習ドキュメント閲覧</h1>
  <p>リンクをクリックすると、下のフレーム内にドキュメントが表示されます。</p>

  <ul>
    <li><a href="guide-basic.html" target="docFrame">基本ガイド</a></li>
    <li><a href="guide-layout.html" target="docFrame">レイアウトガイド</a></li>
    <li><a href="guide-check.html" target="docFrame">確認チェックリスト</a></li>
  </ul>

  <iframe name="docFrame"></iframe>
</body>
</html>

ファイル名： guide-basic.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本ガイド</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #0055A4;
    }

    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>基本ガイド</h1>
  <p>
    これはHTML学習用の基本ガイドです。
    タグの役割やページ構造を確認するための簡単なドキュメントです。
  </p>

  <p><a href="guide-layout.html" target="_self">次のガイドへ</a></p>
</body>
</html>

ファイル名： guide-layout.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>レイアウトガイド</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #009933;
    }

    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>レイアウトガイド</h1>
  <p>
    これはレイアウト確認用のガイドです。
    header、nav、main、footerなどの領域分けを確認できます。
  </p>

  <p>
    <a href="guide-basic.html" target="_self">前のガイドへ</a>
    ｜
    <a href="guide-check.html" target="_self">次のガイドへ</a>
  </p>
</body>
</html>

ファイル名： guide-check.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>確認チェックリスト</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #CC3300;
    }

    p,
    li {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>確認チェックリスト</h1>
  <p>
    HTMLファイルを作成したら、次の項目を確認しましょう。
  </p>

  <ul>
    <li>ファイル名は正しいか</li>
    <li>リンク先のパスは合っているか</li>
    <li>画像のalt属性を書いているか</li>
  </ul>

  <p><a href="guide-basic.html" target="_self">最初のガイドへ戻る</a></p>
</body>
</html>

ブラウザの表示例

このサンプルでは、iframeにname="docFrame"を指定しています。各リンクのtargetにもdocFrameを指定しているため、リンクをクリックするとiframe内の表示だけが切り替わります。

guide-basic.html、guide-layout.html、guide-check.htmlの中にもリンクがあります。ここではtarget="_self"を指定しているため、iframe内で次のページへ移動します。親ページ全体は移動せず、iframe内だけが切り替わります。

図3：nameとtargetでiframe内のページを切り替える

この図から分かること

iframeにname属性を付け、aタグのtarget属性に同じ名前を指定すると、リンク先をiframe内に表示できます。親ページ全体を移動させずに、iframeの中だけを切り替えられるため、資料閲覧ページやヘルプページの表示に便利です。

iframe内のリンクを親ページ全体で開く

iframe内のページにあるリンクは、通常、iframe内で開かれることがあります。しかし、詳細ページなどを親ページ全体で開きたい場合もあります。

その場合は、aタグにtarget="_parent"を指定します。

<a href="detail-page.html" target="_parent">詳細ページへ</a>

target="_parent"を指定すると、iframe内ではなく、親ページ側でリンク先を開く動きになります。

親ページへ展開するリンクを作る

次の例では、iframe内に追加情報を表示し、詳細リンクをクリックすると親ページ全体でdetail-page.htmlを開くようにします。

ファイル名： Lesson29-5.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フレーム内の追加情報</title>
</head>
<body>
  <h2>追加情報</h2>
  <p>
    詳しい解説ページはこちら：
    <a href="detail-page.html" target="_parent">詳細を見る</a>
  </p>
</body>
</html>

ファイル名： detail-page.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>詳細情報ページ</title>
  <style>
    body {
      background-color: #CCCCCC;
      font-family: sans-serif;
      margin: 0;
      padding: 0;
    }

    #container {
      width: 800px;
      margin: auto;
      background-color: #FFFFFF;
      border: solid 3px #333333;
    }

    header {
      background-color: #263F73;
      color: #FFFFFF;
      padding: 24px;
      text-align: center;
    }

    #main {
      padding: 24px;
      line-height: 1.7;
    }

    #main h1 {
      margin-bottom: 20px;
      padding: 10px 14px;
      background-color: #800000;
      color: #FFFFFF;
      border-radius: 4px;
      border-left: solid 6px #400000;
      border-right: solid 6px #400000;
      box-shadow: 2px 2px 6px #666666;
      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: solid 1px #333333;
      padding: 8px;
      text-align: left;
    }

    #main th {
      background-color: #DDDDDD;
    }

    #main img {
      display: block;
      max-width: 100%;
      margin: 20px auto;
      border: solid 2px #333333;
      border-radius: 4px;
    }

    footer {
      background-color: #222222;
      color: #AAAAAA;
      text-align: center;
      padding: 10px;
      font-size: 10pt;
    }
  </style>
</head>
<body>
  <div id="container">
    <header>
      <h1>詳細情報ページ</h1>
    </header>

    <div id="main">
      <h1>初期の電子計算機</h1>
      <p>
        初期の電子計算機は、現在のパソコンやスマートフォンとは大きく異なり、
        部屋全体を使うほどの大きな装置でした。
        多数の部品を組み合わせ、複雑な計算を自動で処理することを目的として開発されました。
      </p>

      <img src="early-computer.png" alt="初期の電子計算機">

      <table>
        <caption>主な特徴</caption>
        <tr>
          <th>項目</th>
          <th>内容</th>
        </tr>
        <tr>
          <th>利用目的</th>
          <td>科学計算や技術計算など</td>
        </tr>
        <tr>
          <th>特徴</th>
          <td>大型で消費電力が大きく、専門的な操作が必要</td>
        </tr>
        <tr>
          <th>影響</th>
          <td>後のコンピュータ開発に大きな流れを作った</td>
        </tr>
      </table>

      <p>
        このような初期の計算機の発展が、後の小型コンピュータや個人向け端末の登場につながっていきました。
      </p>
    </div>

    <footer>
      © 2026 Computer Archive. All rights reserved.
    </footer>
  </div>
</body>
</html>

ブラウザの表示例

Lesson29-5.htmlでは、詳細を見るというリンクにtarget="_parent"を指定しています。このリンクがiframe内に表示されている場合、クリックするとdetail-page.htmlが親ページ全体で開きます。

iframe内だけで表示したいリンクにはtarget="_self"を使い、親ページ全体で開きたいリンクにはtarget="_parent"を使います。リンクの目的に応じて使い分けると、ユーザーが迷いにくくなります。

iframeを使うときの注意点

iframeは便利ですが、使い方には注意が必要です。特に、外部サイトを読み込む場合は、相手側のサイトがiframe表示を許可していないことがあります。その場合、iframe内に表示できないことがあります。

また、iframeを多用すると、ページの読み込みが重くなる場合があります。地図、動画、フォームなどを複数埋め込むと、表示に時間がかかることがあります。必要な場所に絞って使うことが大切です。

iframe利用時の確認ポイント

確認すること内容
srcは正しいか表示したいファイル名やURLが合っているか確認する
サイズは適切かwidthとheightが小さすぎないか確認する
代替リンクはあるか表示できない場合のリンクを用意すると親切
外部サイトは表示可能かiframe表示を許可していないサイトもある
sandboxは適切か必要な機能だけ許可する
読み込みが重くないか地図や動画の埋め込み数に注意する

iframeを使うときは、見た目だけでなく、安全性や使いやすさも考えましょう。特に外部サイトやフォームを読み込む場合は、sandbox属性や表示内容を確認することが大切です。

使用タグと属性の整理

この学習で登場した主なタグと属性を整理します。

タグ・属性用途
iframeページ内に別ページを埋め込む
srciframe内に表示するページを指定する
widthiframeの横幅を指定する
heightiframeの高さを指定する
nameiframeに名前を付ける
sandboxiframe内の動作に制限を付ける
srcdociframe内に直接HTML文字列を書く
loadingiframeの読み込みタイミングを指定する
referrerpolicy参照元情報の扱いを指定する
allowfullscreen全画面表示を許可する
aリンクを作る
targetリンク先を開く場所を指定する

iframeではsrc属性が基本です。srcに表示したいページのファイル名やURLを指定します。サイズはwidthとheight、またはCSSで調整できます。

name属性を使うと、aタグのtarget属性からiframeを指定できます。targetにiframeのnameと同じ値を書くことで、リンク先をiframe内に表示できます。

target="_self"は現在の表示枠で開く指定です。iframe内のページで使うと、iframe内でページが切り替わります。target="_parent"は親ページ側でリンクを開く指定です。iframe内から親ページ全体を移動させたいときに使います。

iframeタグを使うときに意識したいこと

iframeタグを使うと、親ページの中に別のページを埋め込めます。お知らせ、アクセス案内、フォーム、資料ページなど、ページの一部だけを別コンテンツとして表示したいときに便利です。

まずは、iframeタグにsrc属性を指定して、別のHTMLファイルを表示する基本を押さえましょう。そのうえで、CSSを使ってwidth、height、border、border-radiusを調整すると、表示枠を見やすく整えられます。

リンクの表示先を切り替えたい場合は、iframeのname属性とaタグのtarget属性を組み合わせます。targetにiframeのnameを指定すれば、クリックしたリンク先をiframe内に表示できます。iframe内のページから親ページ全体へ移動させたい場合は、target="_parent"を使います。

また、外部サイトやフォームを埋め込む場合は、sandbox属性を使った制限や、表示できない場合の代替リンクも意識しましょう。iframeは便利な埋め込み機能ですが、サイズ、読み込み、セキュリティ、使いやすさを確認しながら使うことが大切です。