【初心者向け】iframeタグの使い方から埋め込み方法まで徹底解説

2HTMLの文書内に、別のHTMLファイルを組み込むことができるiframeタグ

とても便利な要素ですが、使い方を知らない初心者の方もいるでしょう。

・iframeタグってどんな要素?
・どうやって使うの?
・GoogleマップやYouTubeを埋め込むにはどうすればいい?

こんな疑問を抱えていませんか?

今回は、iframeタグの

・基本的な使い方
・幅や高さを指定する方法
・GoogleマップやYouTubeを埋め込む方法 

について説明します。

iframeタグとは

iframeタグとはどういった要素なのか、よく理解していない初心者の方も多いのではないでしょうか?

ここでは、iframeタグの意味や役割について徹底解説していきます。

iframeタグの読み方

iframeタグは「アイフレーム」もしくは「インラインフレーム」と読みます。

「inline frame」の略で、文書内にインラインのフレームを作成するという意味で使われます。

例えば、HTML内で別のHTMLファイルを組み込みたいときに使われることが多いです。

また、GoogleマップやYouTube、FacebookやTwitterなども文書内に埋め込むことができます。

iframeタグは文書内にインラインフレームを作成するための要素

iframeタグは文書内にインラインフレームを作成するための要素です。

iframeタグでは、HTMLの文書内に別の独立したHTMLファイルを表示させることができます。

リンクで別サイトに飛ばさずに、そのウィンドウの中で別サイトをそのまま見れるので、とても便利です。

また、GoogleマップやYouTubeなどのフレームを埋め込むこともできます。

なので、ユーザーにとって見やすいサイトに仕上げることができるでしょう。

MEMO
iframeタグには、width属性やheight属性を使って幅や高さを調整することもできます。

詳しいやり方は後ほど解説します。

iframeタグで利用できる属性

iframeタグでは以下の属性を使うことができます。

属性 説明
width 要素の幅を指定する属性です。
height 要素の高さを指定する属性です。
src 画像やスクリプトなど、要素の参照場所を指定する属性です。
name 要素の名前を定義する属性です。
注意
align、frameborder、longdesc、marginheight、marginwidth、scrolling属性は非推奨となっています。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

iframeタグの基本的な使い方

ここまででiframeタグの意味や役割についてわかりました。

なのでここからは、具体的な使い方について解説していきます。

まだ使い方を知らない方は、しっかりと理解していきましょう。

iframeタグの使い方

iframeタグの使い方をコードを用いて見ていきます。

実際のコードは次の通り。

■index.html

iframeで別のHTMLファイルを組み込むには、同じフォルダ内で別のHTMLファイルを作成する必要があります。

今回の例では、example.htmlを別ファイルとして作成しました。

■example.html

このexample.htmlを組み込むには、src属性を使ってsrc=“example.html”というように指定します。

結果を表示すると、以下のようになるでしょう。

iframeタグの部分にexample.htmlの内容が表示されていますね。

これで別のHTMLファイルを組み込むことができました。

iframeタグの幅と高さを調整する方法

iframeタグで組み込んだ部分は、幅や高さを調整することができます。

ここでは、その調整方法について詳しく解説していきます。

iframeタグで幅を調整する場合はwidth属性、高さを調整するにはheight属性を指定します。

指定方法は今回の例の、「width=“300px”」「height=“200px”」のようにしてください。

結果を表示してみると、次のようになります。

iframeタグの部分が幅300px、高さ200pxになっているのがわかりますね。

このようにiframeタグでは幅や高さも調整できて、サイトのデザインに合わせることができます。

なので、それぞれの属性の使い方を覚えておきましょう。

MEMO
cssで幅や高さを調整することも可能です。

GoogleマップやYouTubeを埋め込む方法

iframeタグは、別のHTMLファイルを組み込むだけでなく、GoogleマップやYouTubeも埋め込むことができます。

Webサイトでは、位置情報を載せるためにGoogleマップを埋め込んだり、解説動画を載せるためにYouTubeを埋め込んだりすることが多いです。

なので、ここではそれぞれの埋め込み方について解説していきます。

Googleマップを埋め込む方法

まずは、Googleマップを埋め込む方法です。

以下の手順で埋め込むことができます。

  • STEP.1
    Googleマップで地図を検索
    Googleマップを開いて埋め込みたい地図を見つけます。

  • STEP.2
    メニューから地図を共有または埋め込むをクリック
    検索窓の左側にある「メニュー」から「地図を共有または埋め込む」をクリックします。

  • STEP.3
    地図を埋め込むをクリックし、HTMLをコピー
    「地図を埋め込む」をクリックし、「HTMLをコピー」をクリックしてコピーします。

  • STEP.4
    コピーしたコードを貼り付け
    HTMLファイル内でコピーしたコードを貼り付けます。
  • STEP.5
    Googleマップが表示される
    結果を表示すると、Googleマップが表示されます。

Googleマップを埋め込むことができました。

これもwidth属性やheight属性を使って幅や高さを調整できるので、試してみるといいでしょう。

YouTubeを埋め込む方法

今度は、YouTubeを埋め込む方法です。

以下の手順で埋め込みましょう。

  • STEP.1
    YouTubeを開いて埋め込む動画を見つける
    YouTubeを開いて、埋め込みたい動画を見つけます。
  • STEP.2
    「共有」をクリック
    動画下部にある「共有」をクリックします。

  • STEP.3
    「埋め込む」をクリック
    「埋め込む」をクリックします。

  • STEP.4
    「コピー」をクリック
    コードが出てくるので、「コピー」をクリックします。

  • STEP.5
    コピーをHTMLファイルに貼り付け
    コピーしたコードをHTMLファイル内に貼り付けます。
  • STEP.6
    YouTubeの動画が表示される
    結果を表示すると、YouTubeの動画が表示されています。

これで、YouTubeを埋め込むことができました。

ブログとYouTubeのどちらも運営している人は、ブログ内にYouTube動画を貼り付けることもよくあります。

なので、埋め込み方を覚えておくといいでしょう。

まとめ

今回は、iframeタグの意味や使い方について詳しく解説しました。

iframeタグは文書内に別のHTMLファイルを組み込むことができるので、便利です。

また、GoogleマップやYouTubeを埋め込んでサイトを工夫することもできます。

なので、今回解説したiframeタグの使い方を覚えておきましょう。

この記事がiframeタグの学習に役立つと幸いです。

参考文献:MDN web docs|iframe:インラインフレーム要素