HTMLのiframe(インラインフレーム)の使い方

HTMLのiframe(インラインフレーム)の使い方

 公開日:

LINEで送る
Pocket

HTMLのiframe(インラインフレーム)の使い方

この記事の目次

  1. iframeタグ(インラインフレーム)とは?
  2. iframeの使い方
    2-1.その他の属性
  3. YouTube動画の埋め込みにも利用されている
    frameborder属性
    allow属性
    allowfullscreen属性
  4. iframeのレスポンシブ対応
  5. 理解するポイントまとめ

1.iframe要素(インラインフレーム)とは?

iframeタグは、HTMLの文書内に別のHTML文書を埋め込む際に使用します。この際、2つのHTML文書は「入れ子」の関係となります。

2.iframeの使い方

iframeタグの使い方は以下のようになります。

<iframe src="index.html" width="200" height="200"></iframe>

src属性には、埋め込むHTMLファイルのパス(URI)を指定します。このパスは、「相対パス」と「絶対パス」どちらでも可能です。
width属性、height属性にはインラインフレームの幅と高さを指定します。pxもしくはパーセンテージが使用できます。
また、iframe要素には「閉じタグ」が必要ですので忘れないようにしましょう。

2-1.その他の属性

上記以外にも属性が使用可能です。使用頻度は高くないとは思いますが、ご紹介します。

srcdoc属性

src属性を使用する場合は、別のHTMLファイルを埋め込むのに対し、このsrcdoc属性を使用すると、「属性値」としてインラインフレームに表示することができます。つまり、別ファイルを用意する必要がないということです。

<iframe srcdoc="<p>埋め込む内容</p>"></iframe>

ちなみに、DOCTYPE、html、head、title、bodyは省略することができます。

※内容に「”(ダブルコーテーション)」や「&(アンパサンド)」を使用する際には「エスケープ」する必要がありますので下記のように記述します。

<iframe srcdoc="<a href=&quot;index.html&quot;>リンクテキスト</a>"></ifarme>

また、src属性とsrcdoc属性を同時に使用した場合は、srcdoc属性が優先されて表示されます。

※srcdoc属性のブラウザ対応
srcdoc属性には対応していないブラウザがあります。対応していないブラウザでは、src属性が読み込まれます。

name属性

name属性は、埋め込むフレームに名前をつけることができます。<form>などの属性値として使用する際にname属性を使用します。

sandbox属性

sandbox属性は、悪意のあるコンテンツの埋め込みを防ぐために使用します。つまり、セキュリティー上の制限をかけることができます。以下の様に指定します。

<iframe src="index.html" sandbox></iframe>

このように、値を指定せずに記述をすると、以下のような制限が掛かります。

  • ・iframe内のドキュメントを親文書とは別ドメインとみなす。
  • ・iframe内から最上位ウィンドウ(親文書)への操作を禁止する。
  • ・iframe内のドキュメントのフォームを無効化する。
  • ・iframe内のドキュメントのスクリプトを無効化する。
  • ・ポップアップを禁止します。(target=”_blank”等)

また、制限内容の一部は属性値として指定することで解除することができます。

allow-same-origin iframe内のドキュメントを親文書と同ドメインとみなす。
allow-top-navigation iframe内から最上位ウィンドウ(親文書)への操作を許可する。
allow-forms iframe内のドキュメントのフォームを有効化する。
allow-scripts iframe内のドキュメントのスクリプトを有効化する。
allow-popups ポップアップを許可します。(target=”_blank”等)

その他にも属性はありますが、ブラウザ対応状況などから、使うことは少ないかと思いますのでここでは省略します。

3.YouTube動画の埋め込みにも利用されている

YouTubeの動画をWebサイトへ埋め込む際には、iframeが使用されています。確認してみましょう。

「共有」の「埋め込む」をクリックすると下記のようなコードが表示されます。

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

上記の内、「frameborder」属性と「allow属性」、「allowfullscreen」属性が使用されていますので少し解説します。

frameborder属性

frameborder属性とは、iframeの境界線を引く属性なのですが「HTML5」では、非推奨の属性です。従って、HTML5で使用する場合は、こちらの属性は削除して「CSS」でボーダーを引く方が良いでしょう。

allow属性

allow属性は、ブラウザの機能やアクセスできるAPIの機能を有効化や無効化するための属性です。
YouTubeでは、このallow属性を使用して自動再生などの機能を有効化することができます。

allowfullscreen属性

allowfullscreen属性は、全画面表示を許可するための属性です。但し、こちらも現在は「allow=”fullscreen”」と書くことが推奨されています。

iframeのレスポンシブ対応

iframeを埋め込む際に必ず出てくる問題が「レスポンシブ」対応です。
ここでは、CSSでiframeをレスポンシブ化する方法をご紹介したいと思います。今回は、YouTube動画を使用してレスポンシブ化したいと思います。下記の動画は、幅560px、高さ315pxが指定してあります(初期値)。したがって、ウィンドウサイズが560px以下になると画面からはみ出して表示されます。

レスポンシブ化するためのCSS

レスポンシブ対応するためには、下記のように変更します。

HTML

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

YouTubeからコピーしてきたコードをdivで囲みます。classはiframe_wrapとします。

CSS

.iframe_wrap {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}

.iframe_wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

CSSのポイントとしては、iframe-wrapクラスの「padding-bottom: 56.25%;」は、アスペクト比(縦横比)が関係しています。YouTube動画の縦横比は「16:9」です。したがって幅と高さを16:9にする為には、幅に対して高さを56.25%にすると、どの画面サイズでも16:9で表示ができるということになります。

理解するポイントまとめ

  • iframeタグは、HTMLの文書内に別のHTML文書を埋め込む
  • iframe要素には「閉じタグ」が必要
  • 様々な属性を使用することで制限を掛けたり、機能を有効化・無効化することができる
  • YouTubeの動画を埋め込む際にも使用されている
LINEで送る
Pocket