ブログをリニューアル予定。過去記事は削除するかもです。

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

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

ページの中で他のサイトを埋め込みたいな。

普通のリンクじゃなくて、そのページ内で完結させたいけど、どんな方法があるんだろう?

 

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

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

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

 

スポンサードサーチ

【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>

Google Workspaceの紹介動画はこちら

Google Workspaceの紹介動画

 

iframeタグを使用する場合

iframeタグを使った書き方
<p>Google Workspaceの紹介動画はこちら</p>
<iframe width="350" height="280" src="https://www.youtube.com/embed/Q_ZPBqVF0_8" title="YouTube video player"></iframe>

Google Workspaceの紹介動画はこちら

 

iframeでできること

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

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

 

Googleマップを埋め込む

Googleマップなどの地図を埋め込むことができます。

会社情報などのページで、住所と一緒に地図を表示するときに便利です。

 

YouTube動画を埋め込む

先ほど紹介した通り。

YouTube動画も<iframe>を使って埋め込むことができます。

 

ウェブサイトを埋め込む

当ブログのトップページを埋め込んでみました。

このように、自分のサイトや外部サイトを埋め込むことも可能です。

 

SNSのフィードを埋め込む

Twitterのタイムラインをスクロール表示することができます。

その他のSNS(Facebook etc…)も表示可能です。

 

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

 

スポンサードサーチ

iframeタグの使い方

iframeタグの使い方

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

 

iframeタグの書き方
<iframe src="ここにURL"></iframe>

 

基本的にはこれだけ。

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

 

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

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

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

 

iframeタグでURLを指定する
<iframe src="https://ksonoda.com"></iframe>

 

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

 

HTMLコードを直接書く

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

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

 

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

すると、このように、記載したHTMLが表示されるようになります。

srcdoc内では一部の文字をエスケープする必要があります。「”」は「&quot;」に。「&」は「&amp;」にしておきましょう。

 

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

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

 

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

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

 

詳細設定

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

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

 

title属性を指定する

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

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

 

title属性をつける
<iframe
 src="ここにURL" title="ここにタイトル"></iframe>

 

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

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

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

 

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

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

 

高さと幅を調節する
<iframe
 src="ここにURL"
 width="350"
 height="200"
></iframe>

 

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

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

 

cssで指定する

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

 

CSSで高さと幅を設定する
iframe {
 width: 350px;
 height: 200px;
}

 

レスポンシブ表示にする

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

 

レスポンシブにする
iframe {
 width: 100%;
}

 

簡単ですね。

 

スクロールの設定

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

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

 

scrolling=”yes” 常にスクロールバーを表示する
scrolling=”no” スクロールを禁止する

 

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

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

 

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

スクロールバーが表示される

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

スクロールを禁止している

 

読み込みを遅らせる

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

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

 

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-ほにゃらら"の”ほにゃらら”に解除したい制限の値を指定します。値は下記をご参照あれ。

 

allow-forms フォーム送信を許可する
allow-scripts JavaScriptの実行を許可する
allow-modals モーダルウィンドウの表示を許可する
allow-popups ポップアップ表示を許可する
allow-orientation-lock 画面の向きのロクを許可する
allow-presentation プレゼンテーションモードを許可する
allow-popups-to-escape-sandbox 埋め込みコンテンツから別ウィンドウ表示時に、sandbox制限を引き継がない
allow-top-navigation 埋め込み先ページでの遷移を許可

 

スポンサードサーチ

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

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

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

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

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

 

Googleマップを埋め込む

STEP1:Googleマップで検索、共有をクリック

STEP1:Googleマップで検索、共有をクリック

まずは、普通にGoogleマップを使うように住所を検索します。

左側に表示されるパネルから「共有」をクリックしましょう。


STEP2:「地図を埋め込む」からコードをコピー

STEP2:「地図を埋め込む」からコードをコピー

「地図を埋め込む」をクリックし、表示されたHTMLコードをコピーします。

この時点で、コードには<iframe>が使われています。


STEP3:あとは貼り付けるだけ

STEP3:あとは貼り付けるだけ

コピーしたHTMLコードを好きな場所に貼り付けるだけ。簡単ですね。

 

YouTube動画を埋め込む

STEP1:「共有」をクリック

STEP1:「共有」をクリック

動画下にある「共有」をクリックします。

(僕はYouTubeの設定が英語なので「Share」になってますが、日本語だと「共有」です)


STEP2:「共有」をクリック

STEP2:「共有」をクリック

表示されたパネルの「共有」をクリックします。


STEP3:表示されたHTMLコードをコピペ

STEP3:表示されたHTMLコードをコピペ

埋め込み用のHTMLコードが表示されるので、コピペで完了です。

 

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

STEP1:「ページプラグイン」でURLを入力

STEP1:「ページプラグイン」でURLを入力

FACEBOOK for Developersのページプラグインから、「FacebookページのURL」にURLを入力します。

表示するタブや、<iframe>の高さ・幅も数値を入力するだけで設定可能です。

見た目を確認しOKなら、「コードを取得」をクリックしましょう。


STEP2:「iframe」を選択し、コードをコピペ

STEP2:「iframe」を選択し、コードをコピペ

JavaScript用のコードと、iframe用のコードが表示されるので、iframeタブを選んで、出てきたコードをコピペすればOKです。

 

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

STEP1:「publish.twitter.com」を開き、URLを入力

STEP1:「publish.twitter.com」を開き、URLを入力

https://publish.twitter.comを開き、タイムラインを載せたいTwitterアカウントのURLを入力します。


STEP2:「Embedded Timeline」を選択し、出てきたコードをコピペ

STEP2:「Embedded Timeline」を選択し、出てきたコードをコピペ

「Embedded Timeline」を選択し、その下に出てきたコードをコピペすれば完了です。


補足:「set customization options」で詳細設定

補足:「set customization options」で詳細設定

コードの取得前に、「set customization options」をクリックすると、詳細設定用の入力欄が表示されるので、必要に応じて幅や高さ、背景色などを指定し、「Update」をクリックして、コードを取得しましょう。

 

スポンサードサーチ

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

まとめ

本記事は以上です。

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

 

  • <iframe>は、ページの中に別のページを読み込むときに使うHTMLタグ
  • srcに読み込みたいページのURLを記載
  • srcdocを使えばHTMLを表示できる
  • 幅や高さ、スクロールバーなどの細かな設定も可能
  • sandboxでセキュリティ対策をすること
  • 主要サービスでは、あらかじめ埋め込み用タグが用意されている

 

こんな感じです。

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

おわり。