HTML要素 ・ メディア
<iframe>
別のページを埋め込む
ページの中に、別のWebページを窓のように埋め込む要素です。地図や動画サービスの埋め込みでよく使います。
01
サンプルコード
HTML
1<iframe
2 title="埋め込みの例"
3 srcdoc="<p style="font-family:sans-serif">ここは別のHTML文書です。</p>"
4 width="320" height="100">
5</iframe>
CSS
1iframe {
2 border: 2px dashed #b68235;
3}
02
実行結果
ブラウザでの表示点線の枠の内側が、埋め込まれた別の文書です
03
解説
iframe は "inline frame" の略で、ページの中に別のHTML文書を表示します。通常は src 属性に埋め込むページのURLを書きます。
上の例では、外部サイトの代わりに srcdoc 属性で埋め込む文書を直接書いています。点線の枠の内側が、別の文書として表示されている部分です。
title 属性には、何を埋め込んでいるかを書きます。読み上げソフトがこの名前を読み上げます。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
src | 埋め込むページのURL |
title | 埋め込み内容の説明（必須と考える） |
loading | lazy で画面に近づくまで読み込まない |
sandbox | 埋め込んだページの機能を制限する |
allow | 全画面表示などの許可 |
srcdoc | 埋め込む文書を直接書く |
Googleマップを埋め込む
地図サービスの「共有 → 地図を埋め込む」で取得したコードを貼ります。
HTML
1<iframe
2 src="https://www.google.com/maps/embed?pb=..."
3 title="カフェ・ミモザの地図"
4 width="600" height="400"
5 loading="lazy"
6 style="border:0"></iframe>
横幅いっぱいで比率を保つ
aspect-ratio を使うと、動画の埋め込みを16:9のまま伸縮できます。
CSS
1iframe {
2 width: 100%;
3 height: auto;
4 aspect-ratio: 16 / 9;
5}
注意点
- 01信頼できないサイトを埋め込まないでください。必要に応じて sandbox で機能を制限します。
- 02埋め込みが多いとページが重くなります。画面外のものには loading="lazy" を付けます。