iframeが表示されないときの原因と対処

症状の確認：空白かエラーかを見る

iframeの枠は出ているのに中身が空白なのか、枠ごと出ていないのかを確認します。枠が出ていない場合はHTMLの記述自体に問題がある可能性があります。

中身が空白の場合は、埋め込み先のコンテンツが表示を拒否しているか、読み込みに失敗していると考えられます。開発者ツールのコンソールに、埋め込みを拒否する旨のエラーが出ていないか確認してください。

よくある原因：埋め込みの拒否とパスの問題

外部サイトをiframeで埋め込もうとすると、相手側の設定で他サイトからの埋め込みを禁止していることがあります。この場合コンソールに拒否のエラーが出て、中身が表示されません。

自作の別ページを埋め込む場合は、相対パスのズレやファイルの添付漏れが原因になります。また、HTTPSのページからHTTPのページを埋め込もうとして混在コンテンツとしてブロックされることもあります。

• 埋め込み元が他サイトからの表示を禁止している
• src の相対パスが実ファイルと合っていない
• 埋め込む自作ページをZIPに含め忘れている
• HTTPSページからHTTPコンテンツを読み込んでブロックされている

症状別チェック表

iframeが表示されないときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

自分でできる確認：コンソールのエラーを読む

開発者ツールのコンソールを開き、埋め込み拒否や混在コンテンツに関するエラーが出ていないかを確認します。拒否の場合はその埋め込み元はiframeでの表示に対応していないため、別の方法を検討する必要があります。

自作ページを埋め込んでいるなら、ネットワークタブでそのページが404になっていないか確認します。404ならパスかアップロード漏れが原因です。

ギガサイト便での対処手順

自作の別ページを埋め込む場合は、埋め込み元のページも含めてまとめてZIPで公開するのが確実です。相対パスを保ったまま全ファイルが揃うため、空白を防げます。

以下の手順で見直してください。外部サイトの埋め込みが拒否される場合は、リンクで開く形に切り替えるのが現実的です。

1. 埋め込み元のページと親ページを同じフォルダにまとめる
2. iframeのsrcが相対パスで正しく書かれているか確認する
3. 外部サイトを埋め込む場合は埋め込み許可があるか調べる
4. フォルダごとZIPに圧縮する
5. ギガサイト便のトップにドラッグ＆ドロップして公開する
6. 発行URLを開いてiframeの中身が表示されるか確認する

予防：埋め込み可否を先に確認しておく

外部コンテンツを埋め込む予定があるなら、そのサービスがiframeでの表示に対応しているかを事前に確認しておくと安心です。対応していないものは、リンクボタンで別タブに開く形にすると確実に共有できます。

自作ページの埋め込みは、最初から全ファイルを同じフォルダにまとめて相対パスで書いておくと、ZIP公開でそのまま動きます。公開前にローカルで確認する習慣をつけましょう。