HTMLのiframeタグ徹底解説：埋め込み方法をステップバイステップで学ぶ

HTMLの<iframe>タグは、Webページの中に別のドキュメント（PDF、Webページ、その他のリソースなど）を埋め込むための要素です。埋め込むリソースの場所は、src属性で指定します。

HTMLを使えば、PDFやGoogleマップなど、あるWebドキュメントの内容を別のページに埋め込むことができます。

そのために活躍するのがHTMLの<iframe>タグです。このタグを使うと、他のWebページなどの外部オブジェクトを1つのWebページ内に埋め込めます。本記事では、具体例とともに、<iframe>タグでWebリソースをページに埋め込む方法を解説します。

HTML iframe（インラインフレーム）とは

iframe（インラインフレーム）は、外部のWebドキュメントをページ上に表示する仕組みです。マップ、PDF、動画などを<iframe>タグで簡単に埋め込めます。

インラインフレーム内のコードは、ページの他の部分から独立しています。そのため、親ページに適用されているCSSやJavaScriptは、iframeの内部には影響しません。

<iframe>タグの基本構文は次のとおりです。

<iframe src="url"></iframe>

<iframe>タグでiframeを作成します。src属性には、埋め込みたいHTMLドキュメントのURLを指定します。

iframeのHTMLコード例

実際の例を見ながら、<iframe>タグの動作を確認しましょう。

ここでは、ワシントンD.C.の歴史協会向けにWebサイトを構築すると想定します。協会では、米国憲法の誕生に関するKhan Academyの動画を埋め込んだページを作りたいとのことです。このページは、協会への入会に関心がある人向けのおすすめ教材として用意されます。動画をサイトに埋め込むには、次のようなコードを使用します。

<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>

このコードを表示すると、次のようになります。

<iframe>要素を使って、外部のWebリソースをページに埋め込みました。埋め込んだリソースは「https://www.youtube.com/embed/Rk8dCnKIfP4」というURLで、歴史協会がサイトに表示したい動画を指しています。

iframeの高さと幅の指定

height属性とwidth属性を使うと、iframeのサイズを設定できます。歴史協会から「動画をもっと大きく表示してほしい」という要望があったとしましょう。

そこで、YouTube動画の幅を500ピクセル、高さを300ピクセルに設定してみます。

<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>

このコードを表示すると、次のようになります。

これで、埋め込んだ動画は幅500ピクセル、高さ300ピクセルで表示され、訪問者が動画を見やすくなります。

なお、CSSでもwidthとheightを指定できますが、HTML自体にheight属性とwidth属性が用意されているため、必ずしもCSSを使う必要はありません。

iframeの枠線を削除する方法

<iframe>タグを使うと、デフォルトではコンテンツの周囲に枠線が表示されます。この枠線を消したい場合は、CSSのborder:none;を使用します。

歴史協会から「YouTube動画の周りの枠線を消してほしい」と依頼された場合のコードは次のとおりです。

<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>

このコードを表示すると、次のようになります。

これで動画の周囲に枠線が表示されなくなりました。

リンクのターゲットとしてiframeを使う

さらに、<iframe>タグはリンクの表示先（ターゲットフレーム）としても利用できます。HTMLリンクのtarget属性にiframeを指定すれば、クリックしたリンクの内容をiframe内に表示できます。target属性には、<iframe>のname属性の値を指定する必要があります。

歴史協会がもう1本、米国憲法第1条についてのKhan Academyの動画をサイトに掲載したいと考えたとしましょう。

ページ上の「Birth（誕生）」というテキストをクリックすると「米国憲法の誕生」の動画がiframeに表示され、「Article I（第1条）」をクリックすると憲法第1条の動画が表示されるようにします。

この機能は、次のコードで実現できます。

<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br />
<a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br />
<a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>

このコードを表示すると、次のようになります。

デフォルトでは、iframeには「米国憲法の誕生」の動画が表示されています。「Article I」のリンクをクリックすると、iframeの内容が切り替わり、憲法第1条についてのKhan Academyの動画が表示されます。

同様に、「Birth」をクリックすると、まだ該当の動画が表示されていない場合に、iframeが「憲法の誕生」の動画へと切り替わります。

まとめ

HTMLの<iframe>タグを使うと、Webページなどの外部リソースを別のWebページに埋め込めます。地図、ファイル、動画、他のページなどを自分のサイトに追加したいときに非常に便利です。

本記事では、具体例を交えながら、<iframe>タグで外部のWebリソースをページに表示する方法を解説しました。これで、プロのように<iframe>タグを使いこなすための基礎知識は身についたはずです。

HTMLについてさらに学びたい方は、HTML（HyperText Markup Language）の学習ガイドもあわせてご覧ください。