HTML レッスン9
iframe・埋め込み
YouTube、地図、外部コンテンツをページに埋め込もう
iframeとは？
<iframe>は 「inline frame」の略で、別のWebページをページ内に埋め込むための要素です。 YouTube動画、Googleマップ、ツイート、外部のWebアプリなどを自分のページに表示できます。
基本的な埋め込み
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
22 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
埋め込みの注意点
⚠ iframeは必ずtitle属性をつける（アクセシビリティ）
⚠ sandbox属性でセキュリティを制限できる
⚠ loading="lazy"で遅延読み込みしてパフォーマンス向上
⚠ 外部サイトはX-Frame-Optionsで埋め込みを拒否していることがある
⚠ レスポンシブにするにはaspect-ratioやCSSラッパーを使う