WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

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

iframeとは?基本的な仕組みと使い方・使用例を解説
このエントリーをはてなブックマークに追加

<iframe>とはHTMLタグの種類の1つで、Webページ内に矩形の領域を作り、指定したURLを読み込んで表示するHTMLタグです。
今回は<iframe>を正しく使いこなすために知っておくべきポイントをご紹介します。

iframeとは

<iframe>(インラインフレーム)とは、HTMLの要素(タグ)の1つです。
「アイフレーム」とも呼ばれ、Webページ内に別のWebページや画像、動画などのコンテンツを読み込んで表示することができます。

iframeの豆知識

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

iframeで主な使われる属性

<iframe>を使用する際に必要な主な属性をご紹介します。まず、下記が基本的な<iframe>のコードです。

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

src属性

<iframe>で読み込むコンテンツを「絶対パス」または「相対パス」で指定します。

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

<関連記事>

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

width属性、height属性

<iframe>はWebページ内に矩形の領域を作り、その内部に別のWebページ等のコンテンツを表示することができます。
その際に矩形の横幅や縦幅をwidth属性、height属性で指定する必要があります。
※CSSで指定することも可能です。

その他の属性

<iframe>では他にも様々な要素を使用することができます。
ここではその中でもよく使われる属性をご紹介します。

title属性

<iframe>で読み込むコンテンツがどのような内容かを記述します。
読み上げソフトなどを使用する場合、<iframe>内のコンテンツの中身は対象となりません。
そこで<iframe>のtitle属性を記述することで、そのコンテンツがどのような内容であるかを説明することができます。

allow属性

<iframe>で読み込むコンテンツを制御するための属性となります。
読み込むコンテンツでどのような機能(動画の自動再生、フルスクリーン表示、マップ上でのユーザー情報の表示等)を許可するのかを記述することができます。

iframeの使い方

<iframe>はHTML内に別のHTMLを設置して表示することができます。

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

iframeの使い方

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

[index.html]

<iframe>タグにはwidth属性とheight属性を使い、横幅と高さをそれぞれ300px、200pxに指定しました。
そしてsrc属性で読み込み先のファイル「iframe.html」を指定します。

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

iframeのスタイル反映

<iframe>へスタイルをする際には注意が必要です。
<iframe>の特徴の1つに元のファイルのスタイルをそのまま継承するというものがあります。
<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>の開始タグと終了タグの間(<iframe>~<iframe>)には、<iframe>に対応していないブラウザで表示されるテキストを記述することができます。

iframeの使用例

YouTube

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

YouTubeの埋め込み手順

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

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

Googleマップ

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

Googleマップの埋め込み手順

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

    4.	サイズを選択し、表示された<iframe>タグをコピーする

  5. サイト上の地図を設置したい場所にコピーした<iframe>タグを貼り付ける
  6. サイズ等を調整する

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

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

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

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

    上記では分かりやすいように<div>タグにクラスを追加しました。
    widthとheightは後ほどCSSで設定します。

  2. <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(%)

  3. <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>タグのアスペクト比が維持される」となります。

この方法をうまく使うことで、YouTube動画のアスペクト比を維持したままレスポンシブ対応できます。

iframeのSEO効果

結論から言ってしまうと<iframe>によるSEO効果はほぼありません。

<iframe>で読み込んだコンテンツは独立したページとして扱われます。
そのため<iframe>で読み込んだコンテンツは、そのページのコンテンツとして評価されません。

つまり<iframe>を多用したページというのは、見た目上は様々なコンテンツがあるページのように見えて、実際にはそのページ特有の情報があまりない低品質なページと評価されてしまいます。

おわりに

今回は<iframe>の基本的な仕組みと使い方・使用例をご紹介しました。
Webサイトのコンテンツの品質を高め、SEO的にも評価されるWebサイトを作るためにも、HTMLタグの仕組みを理解し、正しく使っていきましょう。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
お役立ち資料ダウンロード
SNSでフォロー

問い合わせCTA

ウルロジ誘導CTA_900

セルマーケ

SEO×デザインでどの時代でも集客に強いサイトを制作します

あなたのサイトは、集客できていますか?各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。


Contactお問い合わせ

Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。

関連資料ダウンロードはこちら
サービスのお問い合わせはこちら

Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中!

Webマーケティング最新情報をお届けするDMSメールマガジン
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2022 DM SOLUTIONS Co.,Ltd. All rights reserved.