---
title: "PDF埋め込みが表示されないときの原因と直し方"
description: "AI生成HTMLのPDF埋め込みが共有先で表示されない問題に直面したWeb担当者・デザイナー向け。ブラウザのPDFビューア設定差・パス問題・CSPエラーを原因別に切り分け、確実に表示させるための修正方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/pdf-embed-hidden-fix"
markdown: "https://giga-site.com/articles/pdf-embed-hidden-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 6
---
# PDF埋め込みが表示されないときの原因と直し方

HTMLに埋め込んだPDFが共有先のブラウザで表示されないのは、技術的な理由がいくつか重なりやすい問題です。`<embed>`や`<iframe>`でPDFを埋め込む方法の違いと、環境によって起きる非表示の原因を特定して修正する手順を説明します。

> Source HTML: https://giga-site.com/articles/pdf-embed-hidden-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

HTMLにPDFを埋め込む方法として`<embed src="file.pdf">`や`<iframe src="file.pdf">`を使う場合、PDFファイルが同一オリジンに存在しない、またはファイルパスが相対パスのまま公開URLでは解決できない状態になっていると、ブラウザはPDFを空白か赤い「×」アイコンで表示します。ローカルで確認したときは`./doc.pdf`が機能していても、ギガサイト便などのホスティングサービスでは別途PDFをアップロードしていないと参照できません。

ブラウザのPDFビューア設定も原因になります。ChromeとEdgeにはビルトインPDFビューアがありますが、Firefoxはバージョンや設定によってPDFを外部アプリで開こうとすることがあります。また企業のグループポリシーでブラウザのPDF表示が無効になっている環境では、`<embed>`タグのPDFが一切表示されません。この場合は「PDFを開くボタン」のリンク形式への切り替えが現実的な代替案です。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

まずHTMLソース内の`<embed>`や`<iframe>`のsrc属性値を確認します。`src="/doc.pdf"`や`src="./doc.pdf"`のような相対パスがある場合、そのPDFファイルが公開先のURLルートに存在するかを確認します。ギガサイト便ではHTMLとPDFを同時にzip化してアップロードすることでパスが解決できます。PDFだけ別にアップロードしてURLを取得し、srcに絶対URLを指定する方法もあります。

Chrome DevToolsのNetworkタブでPDFファイルのリクエストを確認します。404（Not Found）ならパス問題、403（Forbidden）ならアクセス権問題、CSPエラー（Consoleに`Content Security Policy`メッセージ）なら共有サービス側のCSPヘッダーが原因です。CSPで`frame-src`や`object-src`が`none`に設定されているサービスでは`<embed>`によるPDF表示ができないため、PDFのダウンロードリンクかPDF.jsを使ったJavaScriptレンダリングに切り替えます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手のブラウザとOSを確認します。MacのSafariはiFrameによるPDF埋め込みに対応していますが、iOS Safariは`<embed>`の表示に制限があります。「スマホでアクセスしていますか？その場合はiOSですかAndroidsですか？」と確認し、iOSの場合はPDF埋め込みをやめてGoogle DriveのプレビューURLやPDF.jsのiframe埋め込みに切り替えます。

相手のブラウザにAdobe Acrobatのブラウザ拡張機能がインストールされている場合、Acrobatがビルトインビューアを上書きしてPDFを別タブや別アプリで開こうとすることがあります。その場合`<embed>`タグのPDFは「読み込み中」で止まります。「Acrobatの拡張機能が入っていますか？」と確認し、一時無効化してもらうか、拡張機能のある環境でも動くPDF.jsベースの表示方法に修正します。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

PDFをHTMLに埋め込む際は、`<embed>`よりも`<iframe src="URL" width="100%" height="600px"></iframe>`の形式の方がブラウザ互換性が高い場合があります。さらに確実なのはPDF.js（Mozilla製のオープンソースPDFレンダラー）をHTMLに組み込む方法で、ブラウザのビルトインビューアに依存せず表示できます。ただしファイルサイズが増えるため、ギガサイト便のファイルサイズ制限内に収まるか確認します。

AIでHTMLを生成するときのプロンプトに「PDFは外部リンクボタンとして表示し、`<embed>`や`<iframe>`は使わないこと」と指定するか、「PDF.jsを使ったインライン表示にすること、PDFのURLはプレースホルダーとして記載し後から変更できること」と書くと、PDFアクセス問題に強い構成が生成されます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### ギガサイト便でHTMLとPDFを同時にアップロードするにはどうすればよいですか？

HTMLファイルとPDFファイルを同じフォルダに入れてzipファイルに圧縮し、zip形式でギガサイト便にアップロードします。HTMLのsrc属性はzip内の相対パスで記述すれば解決します。例：PDFがルート直下なら`src="file.pdf"`です。

### CSPエラーが出ていますが、PDFを表示する別の方法はありますか？

PDFのURLをGoogle DriveやOneDriveの共有プレビューURLに差し替え、`<iframe src="Googleドライブのプレビューリンク"></iframe>`を使う方法があります。外部サービスのURLのため自社CSPに依存しません。ただし相手側でGoogleアカウントが必要になる場合があります。

### iOSのSafariでPDFが表示されません。修正なしで対応できますか？

修正なしではiOS Safariでの`<embed>`PDF表示は安定しません。最も簡単な代替は`<a href="file.pdf" target="_blank">PDFを開く</a>`というリンクボタンへの差し替えです。iOSのSafariはPDFリンクをタップすると標準PDFビューアで開くため、ユーザー体験を損なわずに対応できます。

## 関連記事

- [PDF埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/pdf-embed-hidden-checklist/index.md)
- [PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/pdf-embed-hidden-ai-prompt/index.md)
- [PDF埋め込みが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/pdf-embed-hidden-request-message/index.md)
- [Googleマップ埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/google-map-embed-hidden-fix/index.md)
- [YouTube埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/youtube-embed-hidden-fix/index.md)
- [Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/google-map-embed-hidden-checklist/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "PDF埋め込みが表示されないときの原因と直し方",
  "description": "AI生成HTMLのPDF埋め込みが共有先で表示されない問題に直面したWeb担当者・デザイナー向け。ブラウザのPDFビューア設定差・パス問題・CSPエラーを原因別に切り分け、確実に表示させるための修正方法を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/pdf-embed-hidden-fix",
  "url": "https://giga-site.com/articles/pdf-embed-hidden-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ギガサイト便でHTMLとPDFを同時にアップロードするにはどうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLファイルとPDFファイルを同じフォルダに入れてzipファイルに圧縮し、zip形式でギガサイト便にアップロードします。HTMLのsrc属性はzip内の相対パスで記述すれば解決します。例：PDFがルート直下なら`src=\"file.pdf\"`です。"
      }
    },
    {
      "@type": "Question",
      "name": "CSPエラーが出ていますが、PDFを表示する別の方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PDFのURLをGoogle DriveやOneDriveの共有プレビューURLに差し替え、`<iframe src=\"Googleドライブのプレビューリンク\"></iframe>`を使う方法があります。外部サービスのURLのため自社CSPに依存しません。ただし相手側でGoogleアカウントが必要になる場合があります。"
      }
    },
    {
      "@type": "Question",
      "name": "iOSのSafariでPDFが表示されません。修正なしで対応できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "修正なしではiOS Safariでの`<embed>`PDF表示は安定しません。最も簡単な代替は`<a href=\"file.pdf\" target=\"_blank\">PDFを開く</a>`というリンクボタンへの差し替えです。iOSのSafariはPDFリンクをタップすると標準PDFビューアで開くため、ユーザー体験を損なわずに対応できます。"
      }
    }
  ]
}
```