iframe / アイフレーム

Webページの一部に、外部コンテンツを表示する仕組み

iframe（アイフレーム）は、Webページの中に、別のWebページや動画、地図などのコンテンツを埋め込むためのHTMLタグです。まるで「Webページの中に小さな窓を作って、そこから別の景色を見せる」ようなイメージで、外部のコンテンツを自分のサイトの一部のように表示させることができます。

使い方の例

• YouTube動画の埋め込み: ブログ記事やサイトに、YouTubeの動画プレイヤーをそのまま表示したい時に使います。
• Googleマップの埋め込み: 店舗へのアクセス情報などで、Googleマップをサイトに表示したい時に便利です。
• SNSの投稿の表示: X（旧Twitter）などの投稿を、Webページ上で共有したい場合にも利用されます。
• 外部サービスのフォーム: 問い合わせフォームなどを外部のサービスで作成し、自社サイトに埋め込む際にも使われます

知っておくと便利

iframeで埋め込まれたコンテンツは、元のサイトから独立しているため、デザインの調整が難しい場合があります。特にスマートフォンで見たときに表示が崩れないようにするには、レスポンシブ対応のコードを追加する必要があります。また、信頼できないサイトを埋め込むとセキュリティ上のリスクが生じる可能性もあるため、埋め込むコンテンツの提供元には注意しましょう。