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

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

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

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

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

今回は、iframeタグの

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

について説明します。

1 iframeタグとは
2 iframeタグの基本的な使い方
- 2.1 iframeタグの使い方
- 2.2 iframeタグの幅と高さを調整する方法
3 GoogleマップやYouTubeを埋め込む方法
- 3.1 Googleマップを埋め込む方法
- 3.2 YouTubeを埋め込む方法
4 まとめ

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

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <p>以下がサンプルページです。</p>

    <iframe src="example.html"></iframe>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

<p>以下がサンプルページです。</p>

</body>

</html>

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

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

■example.html

<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>サンプルページ</title>
  </head>
  <body>

    <h1>サンプルページ</h1>
    <p>サンプルページです。</p>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

<h1>サンプルページ</h1>

<p>サンプルページです。</p>

</body>

</html>

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

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

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

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

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

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

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

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    <p>以下がサンプルページです。</p>

    <iframe src="example.html" width="300px" height="200px"></iframe>

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

<p>以下がサンプルページです。</p>

</body>

</html>

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ファイル内でコピーしたコードを貼り付けます。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    [googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26245.660043296244!2d135.5084449052811!3d34.687330907383405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e0cd5c283afd%3A0xf01d07d5ca11e41!2z5aSn6Ziq5Z-O!5e0!3m2!1sja!2sjp!4v1606463199425!5m2!1sja!2sjp&w=600&h=450]

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26245.660043296244!2d135.5084449052811!3d34.687330907383405!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e0cd5c283afd%3A0xf01d07d5ca11e41!2z5aSn6Ziq5Z-O!5e0!3m2!1sja!2sjp!4v1606463199425!5m2!1sja!2sjp&w=600&h=450]

</body>

</html>

STEP.5
Googleマップが表示される
結果を表示すると、Googleマップが表示されます。

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

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

YouTubeを埋め込む方法

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

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

STEP.1
YouTubeを開いて埋め込む動画を見つける
YouTubeを開いて、埋め込みたい動画を見つけます。
STEP.2
「共有」をクリック
動画下部にある「共有」をクリックします。
STEP.3
「埋め込む」をクリック
「埋め込む」をクリックします。
STEP.4
「コピー」をクリック
コードが出てくるので、「コピー」をクリックします。

STEP.5

コピーをHTMLファイルに貼り付け

コピーしたコードをHTMLファイル内に貼り付けます。

<html lang="ja">
  <head>
    <title>サンプルページ</title>
  </head>
  <body>

    [youtube https://www.youtube.com/watch?v=75p-N9YKqNo&w=560&h=315]

  </body>
</html>

<head>

<title>サンプルページ</title>

</head>

<body>

[youtube https://www.youtube.com/watch?v=75p-N9YKqNo&w=560&h=315]

</body>

</html>

STEP.6
YouTubeの動画が表示される
結果を表示すると、YouTubeの動画が表示されています。

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

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

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

まとめ

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

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

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

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

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

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

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。