HTML
🖼️ iframeが表示されない
埋め込み先がiframeを拒否している
😰 こんな症状
<iframe>を書いたのに中身が表示されない。外部サイトを埋め込もうとしたときに起きやすいよ。
🔍 原因
多くのWebサイトはセキュリティのためにX-Frame-Optionsヘッダーで他サイトからのiframe埋め込みを禁止しているよ。これはクリックジャッキング攻撃を防ぐための対策なんだ。埋め込みを許可していないサイトはiframeで表示できないよ。
❌ エラーが起きるコード
<iframe src="https://example.com"></iframe>
<!-- X-Frame-Options で拒否 -->✅ 直し方
1. 埋め込み先のサイトがiframe表示を許可しているか確認する。 2. YouTubeやGoogleマップなどは公式の「埋め込みコード」を使う。 3. 自分のサイト同士なら問題なく表示できる。 4. 開発者ツールのConsoleタブでX-Frame-Options関連のエラーが出ていないか確認する。
✅ 修正後のコード
<!-- 埋め込み許可されたURLを使用する -->この解決法は役立ちましたか？
🔗 関連するエラー
- 画像が表示されない — 画像パスが間違っている
- 拡張子が表示されない（.html が見えない） — OS の設定で拡張子が非表示
- faviconが表示されない — faviconのパスまたは形式が間違っている
- videoタグで動画が再生されない — ファイルパスまたはフォーマットの問題
- dialogタグが表示されない — showModal()を呼んでいない
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説