PDFリンクを埋め込む方法：HTMLに簡単に置いて閲覧者の手間を省く手順

2026.01.09

HTML で PDF を簡単に埋め込む方法をまとめました。
PDF を「リンク」だけではなく、ページ内で直接表示すれば閲覧者は添付ファイルをダウンロードしたり、別タブで開く手間を省けます。
ここでは、最もシンプルなリンクから、埋め込み表示、レスポンシブ対応、アクセシビリティ、セキュリティの観点まで、実際にコードを書きながら解説します。
「HTML に PDF を簡単に置く」ことを目的に、初心者でもすぐにコピペできるサンプルを中心に紹介しますので、ぜひご活用ください。

PDF を「開く」だけなら簡単リンク

最も基本的な方法は、PDF ファイルへの URL を <a> タグに貼り付けることです。
リンクをクリックするとブラウザや PDF ビューアが自動で起動します。

<a href="files/sample.pdf" target="_blank">
  PDF を閲覧する（新しいタブで開く）
</a>
  • target="_blank" を付与すると新しいタブで開く
  • rel="noopener noreferrer" を併記するとセキュリティ上のベストプラクティス
<a href="files/sample.pdf" target="_blank" rel="noopener noreferrer">
  PDF を閲覧する（新しいタブで開く）
</a>

注意
参照先がオリジン外の場合は CORS（Cross‑Origin Resource Sharing）の設定が必要になることがあります。
ただし、ほとんどのブラウザは自前の PDF ビューアを用いて表示させるため、サーバ側での設定は不要です。

PDF を「埋め込む」方法

リンクよりも親ページに直接 PDF を表示したい場合、<embed>、<iframe>、<object> などが使えます。
以下では、最もシンプルで互換性の高い <embed> の使い方を紹介します。

1. <embed> タグを使う

<embed
  src="files/sample.pdf"
  type="application/pdf"
  width="100%"
  height="600px"
/>
  • src に PDF の URL
  • type="application/pdf" が推奨
  • width と height は任意。幅を 100% にしてコンテナに合わせるとレスポンシブにしやすい

2. <iframe> タグを使う

<iframe
  src="https://docs.google.com/gview?embedded=true&url=https://example.com/files/sample.pdf"
  style="width:100%; height:600px;"
  frameborder="0"
></iframe>
  • Google Docs Viewer を経由すると、古いブラウザでも PDF が表示される。
  • 大きさは CSS で自由に調整可能

3. <object> タグを使う

<object
  data="files/sample.pdf"
  type="application/pdf"
  width="100%"
  height="600px"
>
  PDF を表示できません。ダウンロードはこちら:
  <a href="files/sample.pdf" download>sample.pdf</a>
</object>
  • <object> はフォールバックテキストを内蔵できるので、PDF の表示に失敗した場合でもダウンロードリンクを提示できる。

PDF をレスポンシブに表示するコツ

モバイルデバイスでも閲覧しやすさを確保するには、以下のような CSS を併用します。

.pdf-wrapper {
  position: relative;
  width: 100%;
  /* 1:1.5 のアスペクト比で表示 */
  padding-top: 66.67%;
  overflow: hidden;
}
.pdf-wrapper embed,
.pdf-wrapper iframe,
.pdf-wrapper object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="pdf-wrapper">
  <embed src="files/sample.pdf" type="application/pdf">
</div>
  • padding-top: 66.67% は 9:16 の比で、必要に応じてアスペクト比を調整
  • コンテナ内に PDF をフルに置くことで、スクロールせずに全体を閲覧できる

PDF を埋め込む際のアクセシビリティ

1. 見出しや説明文を必ず付ける

埋め込んだ直後に簡単な説明文を入れると、スクリーンリーダー利用者にとって理解しやすくなります。

<p>以下の PDF は、製品マニュアルです。目次はインタラクティブに表示されます。</p>
<div class="pdf-wrapper">
  <embed src="files/manual.pdf" type="application/pdf">
</div>

2. title 属性で代替テキスト

<embed src="files/manual.pdf" title="製品マニュアル PDF" />

3. フォールバックリンク

表示不能な場合に備えて、必ず download 属性付きのリンクを用意しましょう。

<object data="files/manual.pdf" type="application/pdf" width="100%" height="600px">
  PDF の表示に失敗しました。<br>
  <a href="files/manual.pdf" download>PDF をダウンロード</a>
</object>

PDF.js を使ったインタラクティブ埋め込み

ブラウザに PDF ビューアを組み込み、ズームやページ切替をより自由に制御したい場合は、Mozilla が開発した PDF.js を利用すると便利です。

手順

  1. PDF.js のライブラリを取得 
    <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
  2. PDF をロードして表示 
    <canvas id="pdf-canvas"></canvas>
<script>
  const url = 'files/sample.pdf';
  const loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(pdf => {
    pdf.getPage(1).then(page => {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = document.getElementById('pdf-canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({canvasContext: context, viewport: viewport});
    });
  });
</script>
  3. 必要に応じてズームスライダーやページナビゲーションを追加 
    <input type="range" id="zoom" min="0.5" max="3" step="0.1" value="1.5">
<div id="page-num"></div>

PDF.js は「ダウンロード不要でレンダリング」ので、サーバ側で PDF 変換や DRM などの処理を行いたい場合に最適です。
ただし、JavaScript が無効な環境（モバイルキャッシュ付きのオフライン閲覧等）では代替手段を用意する必要があります。

CDN を使ったパフォーマンス最適化

PDF ファイルが大きい場合は、CDN（Content Delivery Network）にホストすることで読み込み速度を向上させます。

<!-- Cloudflare CDN を使用する例 -->
<embed src="https://cdn.example.com/files/sample.pdf" type="application/pdf" width="100%" height="600px">
  • キャッシュ制御: Cache-Control: public, max-age=31536000 を設定すると、ブラウザや CDN が長時間キャッシュします。
  • ETag: 変更がある場合にのみ再取得を促すことで帯域幅を節約します。

セキュリティ上の注意点

  1. CORS ポリシー

    • PDF を埋め込むページが別オリジンにある場合、サーバ側で Access-Control-Allow-Origin ヘッダーを設定しないと embed や iframe で読み込めないことがあります。
    • * で許可するとほとんどのブラウザで可、ただし制御が難しくなるため特定オリジンのみ許可した方が安全です。

  2. コンテンツセキュリティポリシー（CSP）

    • default-src 'self'; だけでは PDF を外部から読み込むことがブロックされるため、 pdf-src 'self' https://cdn.example.com; のように明示的に許可する必要があります。

  3. XSS 保護

    • PDF ファイル自体はバイナリですが、ファイル名に不正な文字列を含めると download で悪意あるファイルがダウンロードされる恐れがあります。
    • サーバ側で MIME タイプと内容の検証を行い、正当な PDF 以外は返却しない設定にしましょう。

まとめ

  • リンクだけでも簡単に閲覧：a タグで新規タブに PDF を開く
  • 埋め込み表示の基本：<embed>（最も簡単）、<object>、<iframe> でサポート
  • レスポンシブ対応：CSS でアスペクト比を固定し、コンテナに合わせて表示
  • アクセシビリティ：説明文・フォールバックリンク・title 属性を忘れずに
  • 高度なビューア：PDF.js でズームやページ切替を実装
  • パフォーマンス：CDN で高速化、適切なキャッシュ制御
  • セキュリティ：CORS・CSP・MIME チェックで安全に提供

これらを組み合わせることで、閲覧者が PDF をダウンロードせずにそのままブラウザ上でスムーズに閲覧できる Web ページを構築できます。ぜひ、実際にサンプルをコピペしてテストし、サイトに最適な埋め込み方法を選んでください。

コメント