iframeタグ 別のHTML文書を埋め込む

catnose catnose · に最終更新

<iframe>インラインフレームタグは、HTML文書の中に、別のHTML文書を埋め込むために使用します。ざっくりと言うと「現在のページに、別のWebページをまるっと埋め込む」ことができます。

iframeのイメージ

目次
このページの目次

具体的なサンプル

実際に例を見てみるのが分かりやすいと思います。まず筆者の個人ブログをここに埋め込んでみようと思います。

<p>iframeを使ってみた</p>
<iframe src="https://catnose99.com/"></iframe>

👆ページの中にWebページがまるごと埋め込まれているのが分かるかと思います。スクロールなども自由にすることができます。後ほど詳しく説明しますが、src属性に埋め込みたいWebページのURLを指定します。

YouTubeの例

皆さんがよく使っている人気Webサービスの埋め込みにも<iframe>がよく使われています。

YouTube動画をiframeで埋め込む

👆たとえばYouTubeの場合、「動画の埋め込み」というメニューを開くと、このような<iframe>のコードが出力されます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/ApXoWvfEYVU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

👆このコードを自分のWebサイトのHTMLに貼り付ければ、そのページ上で動画を再生できるようになるわけですね。

動画だけを埋め込んでるように見えますが、実際にはiframeにより「動画が貼られているWebページ」を埋め込んでいます。このYouTube動画の場合、src属性のURL「https://www.youtube.com/embed/ApXoWvfEYVU」にアクセスしてみると、動画が画面いっぱいのサイズで設置されているWebページだと分かります。

iframeタグの使い方

ここからは具体的な使い方を説明していきます。

srcで埋め込むWebページのURLを指定

基本的な使い方は簡単で、src属性に埋め込むページのURLを指定します。サイト内のページでも、外部サイトのページでもOKです。

<iframe src="埋め込みたいページのURL"></iframe>

😺ただし埋め込みができないように設定されているWebページもあります（後ほど説明します）。

srcdocで直接HTMLタグを書く

srcdoc属性に、埋め込むHTMLを直接書くこともできます。

<iframe
  srcdoc="埋め込みたいHTMLコード"
  src="srcdocが使えなかった場合に表示するURL"
></iframe>

非対応ブラウザ用にsrcも指定

ただしInternet Explorerではsrcdoc属性に対応していません（iframe自体には対応しています）。

合わせてsrcも指定しておくことで、「srcdocに対応していないブラウザならsrcのURLのページを表示する」ということが可能になります。対応ブラウザならsrcは無視されます。

👉srcdocのブラウザ対応状況

具体的には以下のように書きます。非対応ブラウザの場合にはsrcdocの内容は表示されないのでご注意ください。

<iframe
  srcdoc="<h2>直接HTMLを書く</h2><p>こんにちは</p>"
  src="https://catnose99.com/"
></iframe>

srcdocで使えない文字列

srcdoc内で「"」と「&」を使う際は、以下のようにエスケープする（置き換える）必要があります。

  • "→&quot;
  • &→&amp;
<!-- 👎誤った例 -->
<iframe
  srcdoc="<a href="https://example.com">リンク</a>"
></iframe>

<!-- 👍正しい例 -->
<iframe
  srcdoc="<a href=&quot;https://example.com&quot;>リンク</a>"
></iframe>

アクセシビリティのためにtitle属性を指定する

読み上げソフトなどのコンテンツリーダーなどで埋め込まれた内容をあらかじめ判断できるように、title属性を指定しておくべきです（参考）。

<iframe src="~" title="○○ライブラリのデモページ"></iframe>

👆titleには埋め込みコンテンツの説明を書きます。ブラウザの画面には表示されませんが、上で書いた通り、一部のコンテンツリーダーで読み取られることがあります。

widthとheightでフレームのサイズを指定

widthとheight属性により、フレーム（埋め込まれる領域）の幅と高さを指定できます。

<iframe
  src="埋め込むHTMLのURL"
  width="フレームの幅"
  height="フレームの高さ"
></iframe>

ここには単位をつけずに数値だけを入力します。値はpx（ピクセル）に換算されます。例えばwidth="500"なら「幅が500px」という意味になります。

😺パーセント（%）など他の単位は使えないのでご注意ください。

<iframe 
  src="https://catnose99.com/nyache/"
  width="500"
  height="150"
></iframe>

デフォルトの幅と高さ

何も指定しなかった場合、フレームは「幅300px」「高さ150px」で表示されます。

サイズはCSSでも指定できる

以下のように、CSSで幅と高さを指定することもできます。CSSなら%やemなどの単位を使うこともできます。

CSS フレームのサイズをCSSで指定
iframe {
  width: 100%; /* 親要素の幅と合わせる */
  height: 150px;
}

iframeをレスポンシブ表示する

読者はさまざまなサイズの端末からWebページを見るため、<iframe>により埋め込まれたコンテンツがはみ出ないように気をつける必要があります。

例えば、さきほどの例ではwidth="500"を指定したため、ブラウザの幅が500px以下だとはみ出てしまいます。

CSSでmax-widthを指定する

iframeをレスポンシブ対応（ブラウザの幅に応じて、表示幅を調整すること）するためには、CSSでmax-width: 100%を指定します。これで、親要素から横にはみ出なくなります。

😺このCSSはWebサイト制作時に常に書いておくことをおすすめします。

iframe {
  max-width: 100%; /* 親要素の幅以下に */
}

CSSで枠線を消す

<iframe>で埋め込んだフレームのまわりにはデフォルトで枠線が表示されます。この枠線は以下のCSSで非表示にできます。

CSS 枠線を消す
iframe {
  border: none;
}

現状では<iframe>内にframeborder="0"という属性を指定しても非表示にできますが、frameborderはHTML5では廃止されているため、CSSで指定しましょう。

iframeのセキュリティ対策

iframeで外部のWebページを埋め込むときにはセキュリティ面でのリスクがあります。たとえば埋め込んだページに「個人情報を抜き出すようなフォーム」が設置されていた場合、あなたのサイトのユーザーが危害を受けてしまうかもしれません。

大前提として、自分のサイトもしくは信頼できるサイトのページのみ埋め込むようにしましょう。

sandbox属性でサンドボックス化

🤔
サンドボックスとは？
サンドボックスは、他とは切り離され、問題が起きてもその外側に影響が出ないような環境のことです。 iframeにあてはめると「埋め込まれたコンテンツ内で問題があっても、元のページには影響を及ぼさないようにする」ということですね。

<iframe>ではsandboxという属性を指定することで、埋め込みコンテンツができることに制限をかけることができます。

sandbox属性を指定
<iframe src="~" sandbox></iframe>

これにより埋め込みコンテンツに

  • フォームが送信できないように
  • モーダルウィンドウやポップアップが表示されないように
  • JavaScriptを実行できないように

などなどの制限がかかります。<iframe>タグにsandboxとだけ書くと、数ある制限のすべてがかかります。

一部の制限を解除

「制限はかけたいけど、フォームだけは送信できるようにしたい」という場合には、sandbox="解除する制限"というように指定することで、部分的に制限を解除できます。

<!-- 例1：全ての制限をかける -->
<iframe src="~" sandbox></iframe>

<!-- 例2：フォーム送信だけは許可 -->
<iframe src="~" sandbox="allow-forms"></iframe>

<!-- 例3：フォーム送信とポップアップを許可 -->
<iframe src="~" sandbox="allow-forms allow-popups"></iframe>

👆複数の制限を解除するときには、解除したい項目を半角スペース区切りで並べます。

制限解除のための値リスト

sandboxやsandbox=""とだけ書いた場合、以下の項目すべてが許可されません。

allow-forms
フォームの送信を許可
allow-scripts
スクリプト（JavaScript）を実行することを許可
allow-modals
モーダルウィンドウを許可
allow-popups
window.open()やtarget="_blank"などのポップアップを許可
allow-same-origin
リソースが同じオリジンとなることを許可。Webフォントが表示されないときはコレを指定する。詳しくは「同一オリジンポリシー」を参考にしてください
allow-orientation-lock
画面の向きのロックを許可
allow-pointer-lock
Pointer Lock API（マウスカーソルの固定）を許可
allow-presentation
プレゼンテーションモードを許可
allow-popups-to-escape-sandbox
埋め込みコンテンツから別のウィンドウを開いたときに、sandboxの制限を引き継がないように
allow-top-navigation
埋め込み元のページ遷移の操作を許可
allow-top-navigation-by-user-activation
ユーザーの操作による場合のみ、埋め込み元のページ遷移の操作を許可

allowfullscreenで全画面表示を許可

デフォルトでは埋め込みコンテンツからの操作によって、全画面表示モードにすることはできません。しかし、allowfullscreen属性を指定すれば、この制限を解除できます。

埋め込みコンテンツから全画面にできるように
<iframe src="~" allowfullscreen></iframe>

実験段階のallow属性を使って、allow="fullscreen"と書くこともできますが、ブラウザ対応を考えるとallowfullscreenを使うのが良いと思います。

iframeのコンテンツが表示されないとき

たとえばTwitterのページを<iframe>で埋め込もうとしても何も表示されません。

x-frame-options: DENY

これはTwitterからのレスポンスヘッダーにx-frame-options: DENYという値が追加されているためです。

これはTwitter側の設定によるものなので、無理やり表示させようとするのは困難です。潔く諦めましょう。

ブラウザ対応

<iframe>タグ自体は、HTML4から存在するものなので、主要ブラウザすべてで使用できます（Internet Explorerでも使用できます）。

一部の属性を使うときに注意

ただし、さきほど書いた通り<iframe>のsrcdoc属性は、EdgeやIEでは現状対応していません。詳しくはcaniuse.comのiframeについてのブラウザ対応状況をチェックしてみてください。

HTMLの記事をもっと見る