【iframeとは】埋め込み型のコンテンツを表示するHTMLタグを解説

こんな疑問にお答えする記事です。

<iframe>というHTMLタグを使えば、外部リンクを貼ってユーザーを遷移させることなく、別ページを埋め込むことが可能です。

本記事で、<iframe>の基礎から、使い方、各種サービスのコード生成機能を解説します。

スポンサードサーチ

【iframeタグとは】基礎知識と“できること”を解説

<iframe>でどんなことができるのかを、実際に使われている例を見ながら理解していきましょう。

まずは、iframeの基礎知識から解説します。

iframeの基礎知識

そもそも、<iframe>は、ウェブページ内に専用の領域を作り、そのなかに別ページの情報を埋め込むことで、そのページの要素であるかのように表示させるためのタグです。

例えば、自分のブログ記事でYouTubeの動画を紹介したいときなどに使われます。

<iframe>を使わずにYouTube動画を紹介する場合、URLを貼り付けて、クリックされたらその動画ページにジャンプするという仕組みになります。

しかし、<iframe>を使えば、ブログ記事の中に動画そのものを貼り付けることが可能になるので、ユーザーを移動させずに動画再生を行えます。

iframeタグを使用しない場合

<p>Google Workspaceの紹介動画はこちら</p>
<a href="https://www.youtube.com/watch?v=q_ZPBqVF0_8">Google Workplaceの紹介動画</a>

iframeタグを使用する場合

<p>Google Workspaceの紹介動画はこちら</p>
<iframe width="350" height="280" src="https://www.youtube.com/embed/Q_ZPBqVF0_8" title="YouTube video player"></iframe>

iframeでできること

<iframe>を使えば、YouTube動画以外にも様々な要素を埋め込むことが可能です。

一般的に使われる用途をまとめました。

Googleマップを埋め込む

YouTube動画を埋め込む

ウェブサイトを埋め込む

SNSのフィードを埋め込む

<iframe>を使用した各種サービスの埋め込み方は記事の最後に解説しています。

スポンサードサーチ

iframeタグの使い方

<iframe>の使い方は簡単です。

<iframe src="ここにURL"></iframe>

基本的にはこれだけ。

たったこれだけで、様々な要素をページに埋め込むことが可能です。

ウェブページのURLを指定する

上記で紹介したコードの”ここにURL”部分に、埋め込みたいサイトのURLを記載する方法です。

最も基本的な書き方になるので、まずはこれを覚えましょう。

<iframe src="https://ksonoda.com"></iframe>

当ブログのトップページの場合だと上記のように記載します。

HTMLコードを直接書く

URLを記載する代わりにHTMLを直接書くことも可能です。

その場合は、srcではなくsrcdocを用います。

<iframe srcdoc="<h2>scrdocにHTMLを直接書く方法</h2><p>このようにHTMLを書くことが可能。</p><img src=&quot;https://ksonoda.com/wp-content/uploads/img.jpg&quot;>"></iframe>

srcdoc非対応ブラウザ向けコード

ちなみに、Internet Explorerではsrcdocに対応していないので、IEでも表示させたい場合は、srcdocとsrcを両方記載しておくと良いでしょう。

<iframe
　srcdoc="<h2>scrdocにHTMLを直接書く方法</h2><p>このようにHTMLLを書くことが可能。</p>"
　src="ここにURL"
></iframe>

こうしておけば、srcdoc対応ブラウザではその内容が、非対応ブラウザではsrcで指定したURLが表示されるようになります。

詳細設定

ここからは、<iframe>をより詳しく使うための設定方法を解説します。

指定しておいた方が良い属性もあるので、ひとつずつ確認をどうぞ。

title属性を指定する

アクセシビリティ向上のためには、title属性を指定しておくことをおすすめします。

title属性は<iframe>の開始タグ最後につけるだけなので簡単です。

<iframe
　src="ここにURL" title="ここにタイトル"></iframe>

タイトルにはコンテンツの説明を完結に書いておくだけでOK。

ブログのトップページを埋め込むなら、”トップページ”といった具合です。

ここに書いたタイトル属性はブラウザでは表示されません。

フレームサイズを指定する

<iframe>は高さと幅を調整できます。タグ内に直接書いて指定しましょう。

<iframe
　src="ここにURL"
　width="350"
　height="200"
></iframe>

こんな感じで、単位をつけず、数字だけを記載します。

これにより、px（ピクセル）でサイズ指定することができます。

cssで指定する

CSSで高さと幅を設定することもできます。

iframe {
 width: 350px;
 height: 200px;
}

レスポンシブ表示にする

<iframe>をレスポンシブ表示にしたいときは、CSSで画面幅に合わせて100％で表示されるようにしておけばOK。

iframe {
 width: 100%;
}

簡単ですね。

スクロールの設定

スクロールを設定したいときは次を参考にしてください。

何も指定しない場合、デフォルトではマウスホバーによって表示するようになっています。

サンプルコード：スクロールバー表示を設定

下記は、それぞれのサンプルコードです。

<iframe
　src="ここにURL"
　scrolling="yes"
></iframe>

<iframe
　src="ここにURL"
　scrolling="no"
></iframe>

読み込みを遅らせる

<iframe>を多用すると、ページの読み込み速度が低下します。

するとSEOにもよくないので、<iframe>を使うときは読み込みを送らせて、ページ速度に影響が出ないようにしておくことをおすすめします。

<iframe src="ここにURL" loading="lazy"></iframe>

上記の通り、loading="lazy"を追記するだけなので、ページの読み込み速度が気になる人はぜひやっておきましょう。

iframeのセキュリティ対策をする

埋め込み先のサイトに問い合わせフォームなどがある場合、セキュリティ対策は必ずしておきましょう。

というのも、あなたのサイトを通じてユーザーが被害を受けてしまう可能性も否定できないからです。

sandbox属性でサンドボックス化する

<iframe>はサンドボックスという仕組みを使って、埋め込んだコンテンツ内で問題が起きても、元ページに直接的な被害が出ないようにする制限設定が可能です。

<iframe src="ここにURL" sandbox></iframe>

たったこれだけです。

これにより「フォーム送信」や「ポップアップ表示」などができないように制限をかけることができます。

一部の制限を解除する方法

ただし、このやり方では、すべての要素に制限がかかるので、フォーム送信はOKにする、ポップアップ表示は許可する、などの個別設定をしたい場合は、その値を指定する必要があります。

<iframe src="ここにURL" sandbox="allow-ほにゃらら"></iframe>

上記のように、sandobox="allow-ほにゃらら"の”ほにゃらら”に解除したい制限の値を指定します。値は下記をご参照あれ。

スポンサードサーチ

各種サービスの埋め込み方

最後に各種サービスの埋め込み方を紹介して本記事は終了です。

実は、<iframe>のコードをゼロから書かなくても、主要サービスには埋め込みコードを自動生成してくれる機能が備わっています。

基本、コピペでOKなものがほとんどなので、下記を参考にしつつどうぞ。

Googleマップを埋め込む

YouTube動画を埋め込む

Facebookのタイムラインを埋め込む

Twitterのタイムラインを埋め込む

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana SBクリエイティブ 2019年03月18日頃

楽天ブックスで探す

楽天koboで探す

Amazonで探す

Kindleで探す

スポンサードサーチ

まとめ：iframeタグはページの読み込みに使う

本記事は以上です。

少し長くなったので、要点をまとめておきますね。

こんな感じです。

<iframe>を使って、ページ内に好きな外部ページを読み込みましょう。

おわり。