HTMLのiframeとは何か？基本的な使い方や使用時の注意点を解説

本記事では「HTML」のiframeについて解説します。

「HTML」のiframeとは、「HTML」タグの一種です。iframeを用いることで、1つのWebページに別のWebページやメディア（画像、動画など）を組み込めます。

「HTML」を勉強中の方や、iframeについてよくわからない方は、ぜひ参考にしてください。

iframeとは？

「HTML」のiframeタグは、Webページ内に別のWebページやメディアコンテンツ（画像、動画など）を埋め込むために便利な要素です。iframeタグを使用することで、1つのWebページ上で他のWebサイトやサービスからのコンテンツを直接表示できます。

たとえば、YouTubeの動画をブログ記事に埋め込む場合や、Googleマップを企業ページに表示する場合にiframeタグが使用されます。またSNSの投稿や広告なども、iframeタグを用いて埋め込むことが可能です。

iframeタグを使用することで、非技術者でも比較的簡単に外部コンテンツをWebページに組み込めます。

iframeとよく似た要素にframeがある

iframeと似た「HTML」要素として、frameがありますが要素は異なります。

iframeは、1つのWebページ内に別のページやメディアコンテンツを埋め込むための要素です。一方でframeは、1つのWebページを複数のセクションに分割し、それぞれで異なるWebページを表示する役割です。

frame要素は、非推奨となっているframesetタグと組み合わせて使用されます。またframesetタグは、bodyタグとは共存できず、Webページ全体をセクションに分割する機能を提供します。このようにして、1つのブラウザウィンドウ内で、複数の異なるWebページを同時に表示が可能です。

iframeで使われる属性

ここでは、iframeで使われる属性を6つ紹介します。

• src属性は読み込むコンテンツの指定に必須
• width属性とheight属性は要素の幅や高さを指定する
• title属性は読み込むコンテンツの説明に使用する
• name属性はフレームに名前を設定できる
• sandbox属性では悪意あるコンテンツの埋め込みを拒否できる
• target属性はaタグで指定したリンクをiframe内に表示できる

上記の属性はiframeでよく使われるので、必ず押さえておきましょう。

src属性は読み込むコンテンツの指定に必須

iframeでよく使われる属性の1つ目は、src属性です。src属性には、埋め込みたいコンテンツのURLを指定します。たとえば、YouTubeの動画を埋め込む場合は、src属性に動画のURLを設定すれば埋め込むことが可能です。

src属性は、画像やWebページなど、他にもさまざまな種類のコンテンツを指定できます。src属性が指定されていない場合、iframeは何も表示しない状態となりますが、その内部に他のコンテンツを配置することも可能です。

width属性とheight属性は要素の幅や高さを指定する

iframeでよく使われる属性の2つ目は、width属性とheight属性です。widthとheight属性は、iframeのサイズを指定するために使用されます。

width属性とheight属性には、ピクセル値またはパーセンテージが設定できます。たとえば、width=”560″とheight=”315″と設定すると、iframeの幅は560ピクセル、高さは315ピクセルとなるのです。

これらの属性を適切に設定することにより、埋め込むコンテンツを適切なサイズで表示することが可能です。

title属性は読み込むコンテンツの説明に使用する

iframeでよく使われる属性の3つ目は、title属性です。title属性は、iframe内のコンテンツについての短い説明を提供するために使用されます。

title属性はアクセシビリティを高めるため、とくにスクリーンリーダーを使用するユーザーに有用です。たとえばtitle=”YouTube動画”と設定すると、このiframeがYouTube動画を表示していることがわかります。

name属性はフレームに名前を設定できる

iframeでよく使われる属性の4つ目は、name属性です。name属性は、iframeに名前をつけるために使用されます。

「JavaScript」でiframeを操作する際や、フォームデータを送信する際に使用されることがあります。たとえば、name=”myFrame”と設定すると、「JavaScript」からwindow.frames[“myFrame”]として、このiframeにアクセスすることが可能です。

sandbox属性では悪意あるコンテンツの埋め込みを拒否できる

iframeでよく使われる属性の5つ目は、sandbox属性です。sandbox属性は、セキュリティを高めるために使用されます。

sandbox属性を設定すると、iframe内のコンテンツは一定の制限を受け、スクリプトの実行やフォームの送信が制限されることがあります。

そのため、悪意があるコンテンツの影響を最小限に抑えることが可能です。

target属性はaタグで指定したリンクをiframe内に表示できる

iframeでよく使われる属性の6つ目は、target属性です。target属性は、通常は<a>タグで使用され、クリックしたリンク先をどのウィンドウまたはフレームで開くかを指定します。

target属性にiframeのname属性で設定した名前を指定すると、そのリンクは指定したiframe内で開かれます。これは、複数のコンテンツを1つのページ内で、効率的に表示する際に便利です。

iframeタグの使い方とは？

ここでは、iframeタグの基本的な使い方を解説します。ここで解説する内容は、以下の3つです。

• iframeタグの基本構成
• iframeの幅や高さを変更しよう
• iframeの表示ページを変えよう

iframeの簡単な使い方を覚えて、基礎を固めるようにしましょう。

iframeタグの基本構成

iframeは「HTML」の要素（タグ）の1つで、Webページ内に別のWebページや画像・動画などのコンテンツを埋め込めます。基本的なiframeのコードは、以下の通りです。

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

src属性で、読み込むコンテンツのURLを指定することにより、絶対パスや相対パスが使用できます。また、width属性とheight属性で、iframeの横幅と縦幅を指定しています。これは、「CSS」で指定することも可能です。

iframeの幅や高さを変更しよう

iframeタグのサイズを指定しない場合、多くのブラウザで寸法がブラウザのデフォルトサイズ（約300px×150px）になります。しかし、widthとheight属性を使用して、iframeのサイズを自由に変更できます。

<!−− 横幅を500px、縦幅を400pxに設定 −−>
<iframe src="index.html" width="500" height="400"></iframe>

このソースコードは、以下の「CSS」を使用したサイズ指定と同じ挙動をします。

iframe {
  width: 500px;
  height: 400px;
}

iframeの表示ページを変えよう

iframeタグにname属性を使用すると、そのiframeに名前をつけられます。名前をtarget属性と組み合わせることで、<a href>タグのリンクを指定したiframe内に表示できます。

<!−− iframeに名前をつける −−>
<iframe src="index.html" name="myframe"></iframe>

<!−− リンクをiframe内に表示 −−>
<a href="anotherpage.html#034; target="myframe">別のページを表示</a>

このようにして、リンクをクリックするとname=”myframe”と指定されたiframe内にanotherpage.htmlが表示されます。

iframeを使用するシーン

ここでは、iframeを使用する主なシーンを4つ紹介します。

• YouTubeの埋め込み
• Googleマップの埋め込み
• SNSの埋め込み
• ネット広告の埋め込み

iframeは上記のようなシーンでよく使われるタグなので、必ず押さえておいてください。

YouTubeの埋め込み

iframeを使用するシーン1つ目は、YouTubeの埋め込みです。

YouTubeの動画をWebページに埋め込む場合、iframeタグが一般的に使用されます。これにより、ユーザーはWebページを離れることなく動画を視聴できます。

YouTubeの埋め込み手順は、以下の通りです。

• YouTubeで埋め込みたい動画を開く
• 「共有」ボタンをクリックして「埋め込む」を選択
• 生成されたiframeタグをコピー
• Webページの「HTML」に貼り付け

これで、Webページ内にYouTubeが埋め込まれます。

Googleマップの埋め込み

iframeを使用するシーン2つ目は、Googleマップの埋め込みです。

GoogleマップをWebページに埋め込むことで、店舗の場所やイベントの会場などを視覚的に示せます。

Googleマップの埋め込み手順は、以下の通りです。

• Googleマップで表示したい場所を検索
• 「共有」ボタンをクリックして「地図を埋め込む」を選択
• 生成されたiframeタグをコピー
• Webページの「HTML」に貼り付け

これでWebページ内にGoogleマップが埋め込まれます。

SNSの埋め込み

iframeを使用するシーン3つ目は、SNSの埋め込みです。

TwitterやFacebookなどのSNS投稿をWebページに埋め込むことで、リアルタイムの情報やユーザーの反応を表示できます。

SNSの埋め込み手順は、以下の通りです。

• 埋め込みたいSNSの投稿を開く
• 「埋め込む」または相当するオプションを選択
• 生成されたiframeタグまたは埋め込みコードをコピー
• Webページの「HTML」に貼り付け

これでWebページ内にSNSが埋め込まれます。

ネット広告の埋め込み

iframeを使用するシーン4つ目は、ネット広告の埋め込みです。

iframeを使用して、Webページに広告も埋め込めます。これにより、広告主からのコンテンツを簡単にWebページに表示できます。

ネット広告の埋め込み手順は、以下の通りです。

• 広告プラットフォームから埋め込みたい広告を選択
• iframeタグまたは埋め込みコードが提供される場合がある
• コードをコピー
• Webページの「HTML」に貼り付け

これでWebページ内にネット広告が埋め込まれます。

iframeのレスポンシブ対応の方法

レスポンシブデザインは、現代のWeb開発において欠かせない要素です。とくに、iframeを使用する場合は対応が必要です。通常、iframeは固定のwidthとheightで表示されるため、レスポンシブデザインには適していません。しかし、「CSS」を活用することで、iframeもレスポンシブに対応させることが可能です。

「CSS」での対応は比較的簡単で、親要素に対してpadding-topを設定し、iframe自体はwidthとheightを100%に設定します。これにより、親要素のサイズに合わせてiframeもリサイズされます。

以下は、「CSS」によるレスポンシブ対応の例です。

<!−− レスポンシブiframeのコンテナ −−>
.responsive−iframe−container {
  position: relative;
  padding-top: 56.25%; /* 16:9のアスペクト比（変更可能） */
}

/* レスポンシブiframeの設定 */
.responsive−iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以下は、上記の「CSS」に対応する「HTML」のソースコードです。

<div class="−iframe−container">
  <iframe src="://example.com" class="−iframe"></iframe>
</div>

このように、少しの「CSS」の工夫でiframeも、レスポンシブデザインに対応できます。とくに、複数のデバイスでコンテンツを表示する必要がある現代において、この技術は非常に有用です。

iframeの要素が表示されないときの対処法とは

iframeの要素が表示されない原因としては、いくつかの可能性が考えられます。ここでは、iframeの要素が表示されない場合の対処法について、以下の2つの方法を解説します。

• リンクの内容が間違っていないか確認する
• リンク先のセキュリティに引っかかっていないか確認する

iframeの要素が表示されない場合は原因を確認し、上記の2つの方法を試してみてください。

リンクの内容が間違っていないか確認する

iframeの要素が表示されないときの対処法1つ目は、リンクの内容が間違っていないか確認することです。タグに記載されているリンクのアドレスや、タグの条件が間違っていると表示されないため、正しい記述となっているか確認してください。

とくにURLが正確であるか、プロトコル（httpまたはhttps）が正しいか、ドメイン名が正確かのチェックは重要です。

また、iframeタグに必要な閉じタグ（</iframe>）が存在するかも確認してください。閉じタグがないと、iframeは正しく動作しない可能性があります。さらに、iframeのsrc属性が空でないか、正しいリソースを指しているかも確認が必要です。

このような基本的なエラーがない場合でも、ブラウザのキャッシュ（ユーザーが閲覧したサイトのデータを一時的に保存する仕組み）やCookie（ユーザーが閲覧したサイトや入力情報などを保存する仕組み）が影響している可能性もあります。

適切にコードを記述してもエラーになる場合は、ブラウザのキャッシュをクリアしてみるとよいでしょう。

リンク先のセキュリティに引っかかっていないか確認する

iframeの要素が表示されないときの対処法2つ目は、リンク先のセキュリティに引っかかっていないか確認することです。リンク先のセキュリティポリシーやCookieの条件によっては、リンク先の情報を表示できない可能性があります。この場合は、リンク先の条件を変更することで解消できます。

とくにChromeでは「プライバシーとセキュリティ」の設定で、Cookieの受け入れ方を調整することが可能です。たとえば、ローカルでiframeが表示されない場合、Cookieの設定を「すべて受け入れる」に変更すると表示される可能性があります。

また、リンク先がローカルストレージを使用している場合、特定の設定変更が必要になることもあります。その際に、Chromeのシークレットモードを使用すると、ローカルストレージの影響を受けずに表示できる場合もあるので試してみてください。

セキュリティ設定やCookieの設定を変更する前に、必ずその影響を理解し必要な場合は専門家の意見を求めることが重要です。

iframeを使う際の2つの注意点

ここからは、iframeを使う際の注意点として以下の2点を解説します。

• 「HTML5」で廃止された属性があること
• SEO効果が期待できないこと

「HTML」でiframeを使う際は、上記の2点に注意する必要があるため必ず押さえておきましょう。

HTML5で廃止された属性があること

iframeを使う際の注意点1つ目は、「HTML5」で廃止された属性があることです。具体的には、「HTML5」ではframeborder属性（境界線を表示）やscrolling属性（スクロールバーを表示）が廃止されています。

これは、従来使われてきた属性が現代のWeb標準に適合しなくなったためです。変更により属性を使用している既存のコードは、新しいブラウザで正しく動作しない可能性があります。新しいコードを書く際には、HTML5の標準に従う必要があるでしょう。

さらに、「HTML4.01」時代にはiframeが一時的に非推奨のタグとされていましたが、その後「HTML5」で非推奨が解除されています。このような歴史的背景もあり、iframeの使用には注意が必要です。

代わりに、「CSS」や「JavaScript」を用いて同様の効果を実現する方法もあります。

SEO効果が期待できないこと

iframeを使う際の注意点2つ目は、SEO効果が期待できないことです。具体的には、iframeを使用したコンテンツは独立したページとして認識されるため、そのページのコンテンツとして評価されません。SEO対策を考慮する場合は、iframeを多用するとそのページのコンテンツとして扱われず、内容のないサイトと評価される可能性が高くなります。

また、iframeを多用したページは、見た目では多くのコンテンツがあるように見えます。しかし、実際にはそのページ特有の情報が少ないため、検索エンジンによって低く評価される可能性があるでしょう。そのため、SEO対策をおこなう場合は、iframeの使用を控えめにし、必要な情報は直接ページに埋め込むようにしてください。

また、iframeで読み込む外部コンテンツが必要な場合は、そのコンテンツに関する説明やサマリーをページ内に記載することで、一定のSEO効果を期待できます。

iframeが非推奨時に代替で使えるタグとは？

iframeタグが適していない特定のケースでは、代わりにobjectタグが有用な場合があります。

objectタグは、外部リソース（「HTML」ページ、PDF、画像、Flashなど）を埋め込むための「HTML」要素です。objectタグは非常に柔軟で、data属性を使って埋め込むリソースのURLを指定できます。また、type属性でコンテンツのMIMEタイプの指定も可能です。

<object data="https://example.com/somefile.pdf" type="application/pdf" width="600" height="400">
  <!−− フォールバックコンテンツ −−>
  <p>PDFファイルを表示できません。<a href="https://example.com/somefile.pdf">こちら</a>からダウンロードしてください。</p>
</object>

この例では、PDFファイルを埋め込んで、widthとheight属性でサイズを指定しています。もしブラウザが、<object>タグに対応していない場合や指定したMIMEタイプに対応していない場合、フォールバックコンテンツ（この例では<p>タグ内のテキスト）が表示されます。また、コンテンツを埋め込むタグに、imgとcanvasがあります。

imgは画像を埋め込むためのタグで、src属性で画像のURLの指定が可能です。canvasはグラフィックスを動的に描画するための領域を提供し、主に「JavaScript」と組み合わせて使用されます。

これらの要素は特定のタイプのコンテンツに特化しているため、objectやiframeよりもシンプルなケースで便利です。しかし、<object>タグは多機能であり、さまざまな種類のコンテンツを埋め込む場合は適切な代替手段となることがあります。

iframeタグを使って画像や動画などを埋め込んでみよう

「HTML」のiframeについて解説しました。

iframeを使いこなせるようになれば、画像や動画などのコンテンツ表示を、より自由に行えるようになります。本記事を参考に、iframeを使った実装を自分なりに試してみてください。