iframeとは

iframeとは？

iframeとは、Inline FRAMEの略であり、HTMLタグの中に別のファイルを埋め込むことができる要素のことです。

ファイルのリンク先を表示するsrc属性や幅や高さを決める属性と組み合わせて、サイト上の一部として別ファイルを表示することができます。

iframeとframeの違い

iframeと似ている言葉でframeがあり、これらの違いを理解していない人は多いでしょう。

frameは、ページ全体を分割するものであり、iframeは埋め込みをするためのものであるため、使い間違えないように注意しましょう。

iframeを使う場面は？

iframeを使用することで、様々な形式のリンクを埋め込むことができるようになります。

そのため、YouTubeなどの動画やSNS、マップの埋め込みなどでiframeタグを使う場面について解説します。

動画を埋め込む

動画を埋め込む際には、埋め込むためのHTMLタグは自動生成してくれるため、基本的には、タグをコピーして記事に貼り付けるだけでできます。

動画ページ内の共有ボタンをクリックすることで、埋め込むを選択するとHTMLタグを表示させることが可能です。

SNSを埋め込む

SNSの埋め込みタグも自動生成であるため、HTMLタグをコピーして記事内に貼り付けるだけで完了します。

SNSでも、埋め込むための選択肢があるため、選択すると簡単に埋め込むことができます。

Googleマップを埋め込む

Googleマップは、まずGoogleマップへアクセスして、埋め込みたい場所のマップを表示させると、メニューから共有をクリックします。

共有をクリックすることで、リンクが自動生成されるため、マップを埋め込む場合には、地図を埋め込むを選択し、表示されたiframeタグをコピーして貼り付けましょう。

広告を埋め込む

広告も基本的な使用方法は同じであり、タグが自動生成されるため、コピーして貼り付けるだけで完了します。

しかしながら、広告のタイプや内容によっては、iframeの使用を禁止している場合もあるため、注意しましょう。

iframeタグでの埋め込み方法は？

iframeタグは埋め込むタグであるため、実際に埋め込む方法について解説します。

YouTubeでの埋め込み

まずは、埋め込みたいYouTubeを開いて、右下の共有ボタンをクリックします。

クリックすると「<>」という埋め込みボタンが表示されるため、選択しましょう。

そうすることで、埋め込みコードが出てくるため、そのままコピーして、テキストエディタに貼ることで埋め込むことができます。

Googleマップでの埋め込み

GoogleマップでもYouTubeと同じ手順で埋め込むことが可能です。

表示したい所在地のパネル右下の共有ボタンをクリックして、地図を埋め込むというタブのHTMLをコピーを選択すると、HTMLタグが表示されます。

そして、そのHTMLタグをコピーして、自分のテキストエディタに貼り付けることで、埋め込むことができます。