最終更新<iframe>インラインフレームタグは、HTML文書の中に、別のHTML文書を埋め込むために使用します。言うと「現在のページに、別のWebページをまるっと埋め込む」ことができます。具体的なサンプル実際に例を見てみるのが分かりやすいと思います。筆者の個人ブログをここに埋め込んでみようと思います。👆ページの中にWebページがまるごと埋め込まれているのが分かるかと思います。スクロールなども自由にすることができます。後ほど詳しく説明しますが、src属性に埋め込みたいWebページのURLを指定します。皆さんがよく使っている人気Webサービスの埋め込みにも<iframe>がよく使われています。👆たとえばYouTubeの場合、「動画の埋め込み」というメニューを開くと、このような<iframe>のコードが出力されます。👆このコードを自分のWebサイトのHTMLに貼り付ければ、そのページ上で動画を再生できるようになるわけですね。動画だけを埋め込んでるように見えますが、実際にはiframeにより「動画が貼られているWebページ」を埋め込んでいます。このYouTube動画の場合、src属性のURL「https://www.youtube.com/embed/ApXoWvfEYVU」にアクセスしてみると、動画が画面いっぱいのサイズで設置されているWebページだと分かります。iframeタグの使い方ここからは具体的な使い方を説明していきます。基本的な使い方は簡単で、src属性に埋め込むページのURLを指定します。サイト内のページでも、外部サイトのページでもOKです。src="埋め込みたいページのURL"></iframe>😺ただし埋め込みができないように設定されているWebページもあります(後ほど説明します)。srcdocで直接HTMLタグを書くsrcdoc属性に、埋め込むHTMLを直接書くこともできます。Explorerではsrcdoc属性に対応していません(iframe自体には対応しています)。合わせてsrcも指定しておくことで、「srcdocに対応していないブラウザならsrcのURLのページを表示する」ということが可能になります。対応ブラウザならsrcは無視されます。具体的には以下のように書きます。非対応ブラウザの場合にはsrcdocの内容は表示されないのでご注意ください。120px;}すべて表示srcdocで使えない文字列srcdoc内で「"」と「&」を使う際は、以下のようにエスケープする(置き換える)必要があります。href=&ampquot;https://example.com&ampquot;>リンク</a>"></iframe>アクセシビリティのためにtitle属性を指定する読み上げソフトなどのコンテンツリーダーなどで埋め込まれた内容をあらかじめ判断できるように、title属性を指定しておくべきです(参考)。title="○○ライブラリのデモページ"></iframe>👆titleには埋め込みコンテンツの説明を書きます。ブラウザの画面には表示されませんが、上で書いた通り、一部のコンテンツリーダーで読み取られることがあります。widthとheightでフレームのサイズを指定widthとheight属性により、フレーム(埋め込まれる領域)の幅と高さを指定できます。height="フレームの高さ"></iframe>ここには単位をつけずに数値だけを入力します。値はpx(ピクセル)に換算されます。width="500"なら「幅が500px」という意味になります。😺パーセント(%)など他の単位は使えないのでご注意ください。height="150"></iframe>すべて表示デフォルトの幅と高さ何も指定しなかった場合、フレームは「幅300px」「高さ150px」で表示されます。サイズはCSSでも指定できる以下のように、CSSで幅と高さを指定することもできます。CSSなら%やemなどの単位を使うこともできます。150px;}iframeをレスポンシブ表示する読者はさまざまなサイズの端末からWebページを見るため、<iframe>により埋め込まれたコンテンツがはみ出ないように気をつける必要があります。さきほどの例ではwidth="500"を指定したため、ブラウザの幅が500px以下だとはみ出てしまいます。100%を指定します。これで、親要素から横にはみ出なくなります。😺このCSSはWebサイト制作時に常に書いておくことをおすすめします。*/}すべて表示CSSで枠線を消す<iframe>で埋め込んだフレームのまわりにはデフォルトで枠線が表示されます。この枠線は以下のCSSで非表示にできます。none;}現状では<iframe>内にframeborder="0"という属性を指定しても非表示にできますが、frameborderはHTML5では廃止されているため、CSSで指定しましょう。iframeのセキュリティ対策iframeで外部のWebページを埋め込むときにはセキュリティ面でのリスクがあります。埋め込んだページに「個人情報を抜き出すようなフォーム」が設置されていた場合、あなたのサイトのユーザーが危害を受けてしまうかもしれません。大前提として、自分のサイトもしくは信頼できるサイトのページのみ埋め込むようにしましょう。🤔サンドボックスとは?サンドボックスは、他とは切り離され、問題が起きてもその外側に影響が出ないような環境のことです。iframeにあてはめると「埋め込まれたコンテンツ内で問題があっても、元のページには影響を及ぼさないようにする」ということですね。<iframe>ではsandboxという属性を指定することで、埋め込みコンテンツができることに制限をかけることができます。sandbox></iframe>これにより埋め込みコンテンツにフォームが送信できないようにモーダルウィンドウやポップアップが表示されないようにJavaScriptを実行できないようになどなどの制限がかかります。<iframe>タグにsandboxとだけ書くと、数ある制限のすべてがかかります。「制限はかけたいけど、フォームだけは送信できるようにしたい」という場合には、sandbox="解除する制限"というように指定することで、部分的に制限を解除できます。allow-popups"></iframe>👆複数の制限を解除するときには、解除したい項目を半角スペース区切りで並べます。制限解除のための値リストsandboxやsandbox=""とだけ書いた場合、以下の項目すべてが許可されません。allow-formsフォームの送信を許可allow-scriptsスクリプト(JavaScript)を実行することを許可allow-modalsモーダルウィンドウを許可allow-popupswindow.open()やtarget="_blank"などのポップアップを許可allow-same-originリソースが同じオリジンとなることを許可。Webフォントが表示されないときはコレを指定する。API(マウスカーソルの固定)を許可allow-presentationプレゼンテーションモードを許可allow-popups-to-escape-sandbox埋め込みコンテンツから別のウィンドウを開いたときに、sandboxの制限を引き継がないようにallow-top-navigation埋め込み元のページ遷移の操作を許可allow-top-navigation-by-user-activationユーザーの操作による場合のみ、埋め込み元のページ遷移の操作を許可allowfullscreenで全画面表示を許可デフォルトでは埋め込みコンテンツからの操作によって、全画面表示モードにすることはできません。allowfullscreen属性を指定すれば、この制限を解除できます。allowfullscreen></iframe>実験段階のallow属性を使って、allow="fullscreen"と書くこともできますが、ブラウザ対応を考えるとallowfullscreenを使うのが良いと思います。iframeのコンテンツが表示されないときたとえばTwitterのページを<iframe>で埋め込もうとしても何も表示されません。DENYという値が追加されているためです。これはTwitter側の設定によるものなので、無理やり表示させようとするのは困難です。Explorerでも使用できます)。一部の属性を使うときに注意ただし、さきほど書いた通り<iframe>のsrcdoc属性は、EdgeやIEでは現状対応していません。詳しくはcaniuse.comのiframeについてのブラウザ対応状況をチェックしてみてください。