---
title: "iframeが表示されないときの原因と対処"
description: "地図や外部コンテンツをiframeで埋め込んだのに公開後に枠が空白になった方向け。表示許可・HTTPSとHTTPの混在・相対パスのズレを症状ごとに切り分け、適切な対処を選べるようになります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/iframe-not-showing"
markdown: "https://giga-site.com/articles/iframe-not-showing/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-22"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# iframeが表示されないときの原因と対処

地図や外部コンテンツ、自作の別ページをiframeで埋め込んだのに、ギガサイト便で公開すると枠が空白になる、というケースがあります。原因は埋め込み元の表示許可、HTTPSとHTTPの混在、相対パスのズレなどさまざまです。この記事では症状の切り分けから、自分でできる確認、ギガサイト便での対処手順、予防策までを順番に説明します。

> Source HTML: https://giga-site.com/articles/iframe-not-showing
> Article index: https://giga-site.com/articles/index.md

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

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公開でそのまま動きます。公開前にローカルで確認する習慣をつけましょう。

## よくある質問

### iframeの中だけが真っ白になります。

埋め込み元が他サイトからの表示を拒否しているか、読み込みに失敗している可能性があります。開発者ツールのコンソールで拒否や混在コンテンツのエラーが出ていないか確認してください。

### 外部サイトを埋め込みたいのに表示されません。

多くのサイトはセキュリティ上、他サイトからのiframe埋め込みを禁止しています。その場合は埋め込みをあきらめ、リンクボタンで別タブに開く形に変更するのが現実的です。

### 自作の別ページを埋め込むとうまくいきません。

相対パスのズレやファイルの添付漏れが原因のことが多いです。埋め込み元と親ページを同じフォルダにまとめ、ZIPで一緒に公開すると解決しやすくなります。

### HTTPのコンテンツは埋め込めますか。

HTTPSのページからHTTPのコンテンツを埋め込むと混在コンテンツとしてブロックされます。埋め込み元をHTTSに切り替えるか、可能なら自分のZIPに含めて相対パスで読み込んでください。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [外部CDNのCSS・JSが読み込めないときの対処](https://giga-site.com/articles/external-cdn-not-loading/index.md)
- [CSSファイルが読み込まれずスタイルが全く当たらないときの対処（相対パス）](https://giga-site.com/articles/css-not-loading-relative-path/index.md)
- [SVG画像が表示されないときの原因と対処](https://giga-site.com/articles/svg-not-showing/index.md)
- [背景画像が表示されないときの原因と対処](https://giga-site.com/articles/background-image-not-showing/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "iframeが表示されないときの原因と対処",
  "description": "地図や外部コンテンツをiframeで埋め込んだのに公開後に枠が空白になった方向け。表示許可・HTTPSとHTTPの混在・相対パスのズレを症状ごとに切り分け、適切な対処を選べるようになります。",
  "datePublished": "2026-06-22",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/iframe-not-showing",
  "url": "https://giga-site.com/articles/iframe-not-showing",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "iframeの中だけが真っ白になります。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "埋め込み元が他サイトからの表示を拒否しているか、読み込みに失敗している可能性があります。開発者ツールのコンソールで拒否や混在コンテンツのエラーが出ていないか確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "外部サイトを埋め込みたいのに表示されません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "多くのサイトはセキュリティ上、他サイトからのiframe埋め込みを禁止しています。その場合は埋め込みをあきらめ、リンクボタンで別タブに開く形に変更するのが現実的です。"
      }
    },
    {
      "@type": "Question",
      "name": "自作の別ページを埋め込むとうまくいきません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "相対パスのズレやファイルの添付漏れが原因のことが多いです。埋め込み元と親ページを同じフォルダにまとめ、ZIPで一緒に公開すると解決しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "HTTPのコンテンツは埋め込めますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTTPSのページからHTTPのコンテンツを埋め込むと混在コンテンツとしてブロックされます。埋め込み元をHTTSに切り替えるか、可能なら自分のZIPに含めて相対パスで読み込んでください。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```