iframe(他のページを埋め込む)

このレッスンでは、iframeタグを使って他のページを埋め込む方法を学び、地図や動画の埋め込みの仕組みを理解することを目標にします。「HTML iframe 使い方」で調べている方向けの内容です。

<iframe>タグを使うと、別のWebページを自分のページの中に「窓」のように埋め込めます。地図や動画の埋め込みなど、実際のWebサイトでもよく使われます。width・heightで表示サイズを、titleで内容の説明を指定できます。

サンプルコードでは、<iframe src="URL" width="100%" height="150">という形で、別のページを100%幅・150pxの高さの枠に埋め込んでいます。title属性は画面には表示されませんが、読み上げソフトを使う人に「何が埋め込まれているか」を伝える役割を持っています。

初心者がよくつまずくのが、埋め込み先のサイトの設定によっては、iframeでの表示自体が拒否されるケースがあることです。セキュリティ上の理由から、多くのサイトはiframeへの埋め込みをブロックしており、すべてのページが自由に埋め込めるわけではありません。

YouTube動画の埋め込みコードやGoogleマップの共有機能を使ったことがあれば、実はその裏側でこのiframeタグが使われています。外部サービスのコンテンツを自分のサイトに取り込みたいときの、標準的な方法として広く使われています。