iframeとは？基本的な仕組みと使い方・使用例を解説

2022.11.10 Web制作

サイトリニューアル

1 iframeとは
- 1.1 iframeの豆知識
2 iframeで主な使われる属性
3 iframeの使い方
- 3.1 iframeのスタイル反映
- 3.2 iframeが使えないブラウザの場合
4 iframeの使用例
- 4.1 YouTube
- 4.2 Googleマップ
5 応用編：iframeのレスポンシブ対応
6 iframeのSEO効果
7 おわりに

iframeとは

iframeの豆知識

実はHTML4.01のときに<iframe>は非推奨のタグとなったことがあります。
しかし、YouTubeの動画埋め込みやWeb広告表示等多くのサイトで利用され、利便性が高かったこともあり、HTML5では非推奨が解除されました。
現在では自由に使うことができます。

iframeで主な使われる属性

src属性

絶対URL：https://digital-marketing.jp/index.html
相対パス：index.html

＜関連記事＞

⇒絶対パス・相対パスとは？種類と違い、書き方について解説【初心者向け】

width属性、height属性

その他の属性

title属性

allow属性

iframeの使い方

例えば、「index.html」内に別のHTML「iframe.html」を表示しようとする場合は以下のような使い方になります。

iframeの使い方

まずは「index.html」と「iframe.html」の2つのファイルを用意します。
次に「index.html」に<iframe>タグを使って「ifram.html」を読み込む記述をします。

[index.html]

iframe対応のブラウザでご確認ください

これで「index.html」内の<iframe>タグ部分に矩形の領域ができ、その内側に「iframe.html」が表示されるようになります。

iframeのスタイル反映

例えば上記の場合、「index.html」と「iframe.html」の違いが分かりやすいように、「iframe.html」にスタイルを追加しています。

[iframe.html]

body {
background: #666;
color: #fff;
}

元のファイルのスタイルを継承するということは、「iframe.html」で追加したスタイルを「index.html」の<iframe>タグ内で読み込んだコンテンツにも反映するということになるのです。
このとき、「iframe.html」で追加したスタイルは「index.html」自体に影響を与えることはありません。
そのため「iframe.html」で記述した<body>タグのスタイルは「index.html」の<body>タグには反映されないのです。

また、<iframe>タグの外枠に関しては、<iframe>タグを記述しているファイルのスタイルが反映されます。
例えば今回の例であれば、<iframe>タグの外枠を変更したい場合は、「index.html」のスタイルを変更する必要があるのです。

つまり上記の例でまとめると、

<iframe>タグの外枠より外側：「index.html」のスタイルが反映される
<iframe>タグの内側：「iframe.html」のスタイルが反映される

ということになるのです。
※ただし、JavaScript等を使うことで「index.html」で読み込んだスタイルを<iframe>タグ内に反映することも可能です。

iframeが使えないブラウザの場合

iframeの使用例

YouTube

YouTubeの動画をサイト上に設置して表示することができます。
動画ファイルを自分のサーバーにアップすることなくサイト上に動画を設置することができるため、サーバーの負担を軽減し、サイトの表示速度を上げることができます。

YouTubeの埋め込み手順

表示したいYouTubeの動画ページから埋め込みタグ（<iframe>タグ）を取得します。

表示したいYouTubeの動画ページを開く
動画の下にある「共有」をクリックする
「共有」＞「埋め込む」をクリックする
「動画の埋め込み」にある<iframe>タグをコピーする（右下の「コピー」をクリックするでも可）
サイト上の動画を設置したい位置にコピーした<iframe>タグを貼り付ける
動画サイズの調整をする　→widthとheightの数値を調整する
動画のオプションを追加する　例：自動再生・字幕・ループ再生など

Googleマップ

現在多くのサイトで地図としてGoogleマップを表示させる方法が浸透しています。
無料で使え、自動で周辺の最新情報を更新してくれるなどメリットが多いからです。

Googleマップの埋め込み手順

Googleマップを開き、表示させたい場所を検索する
例：https://goo.gl/maps/9Jgmsv1GnEQ3VVr1A
「共有」をクリックする
モーダルウィンドウが開いたら、「地図を埋め込む」をクリックする
サイズを選択し、表示された<iframe>タグをコピーする
- 「HTML をコピー」をクリックするでも可能
- サイズは後ほど手動で変更することも可能
サイト上の地図を設置したい場所にコピーした<iframe>タグを貼り付ける
サイズ等を調整する

応用編：iframeのレスポンシブ対応

現在のWebサイトの主流はレスポンシブ対応です。ブラウザの横幅に応じて、コンテンツのサイズを変更していく必要があります。
基本的に<iframe>はwidthとheightで設定された数値で表示されるため、そのままではレスポンシブに対応することができません。仮にwidthを100%に設定したとしても高さが固定の場合はアスペクト比が維持できないからです。
そこでCSSをうまく使い、<iframe>の縦横比をそのままにレスポンシブに対応させる方法をご紹介します。

例：<iframe>を横幅100%、横と縦のアスペクト比を16:9で表示したい場合

<iframe>タグを<div>タグで囲む
<div class="parsent">
<iframe src="iframe.html"></iframe>
</div>

上記では分かりやすいように<div>タグにクラスを追加しました。
widthとheightは後ほどCSSで設定します。
<div>タグにCSSを追加する
div.parsent {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}

まずはwidthを100%に設定します。
そして高さを0にし、代わりに余白（padding-bottom）で高さを設定します。このとき、padding-bottomに設定する数値は親要素の横幅に対する表示したい縦幅の比率となります。
今回の場合、横幅100%の横16に対して縦9で表示したいため、下記のように計算します。
(9 / 16) × 100(%) = 56.25(%)
<iframe>タグにCSSを追加する
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

position: absolute;を設定することで<iframe>を絶対配置します。
<div>タグにposition: relative;を設定したので、<div>タグが絶対配置の起点となります。
そして<iframe>タグのwidthとheightを100%にすることで<iframe>タグのサイズが<div>タグと同じサイズになります。
そのため「<div>タグのアスペクト比が維持される」＝「<iframe>タグのアスペクト比が維持される」となります。