PDFファイルをWebサイトに埋め込む方法を解説してください。

 PDFファイルをWebサイトに埋め込む方法は、主に3つあります。目的（ブラウザの標準機能で十分か、デザインを重視するか、全デバイスでの互換性を優先するか）に合わせて選ぶのがベストです。

---

1. HTMLの <embed> または <iframe> タグを使う（最も簡単）

ブラウザが標準で持っているPDFビューワーを利用する方法です。特別なライブラリは不要で、コードを数行書くだけで表示できます。

実装例（<iframe> の場合）

HTML

<iframe src="sample.pdf" width="100%" height="500px">
    <p>お使いのブラウザはPDFの表示に対応していません。
       <a href="sample.pdf">こちらからダウンロード</a>してください。
    </p>
</iframe>

• メリット: 実装が非常に簡単。

• デメリット: スマートフォン（特にiOS）では1ページ目しか表示されない、あるいは「ダウンロード」ボタンだけが表示されるなど、挙動が不安定な場合があります。

---

2. Google ドキュメント ビューワーを使う（互換性重視）

Googleが提供している無料のビューワーを介して表示する方法です。ブラウザのPDF機能に依存しないため、比較的多くの環境で安定して表示されます。

実装例

src 属性のURLの末尾に、自分のPDFファイルのURLを記述します。

HTML

<iframe src="https://docs.google.com/viewer?url=https://example.com/sample.pdf&embedded=true" 
        width="100%" 
        height="600px" 
        style="border: none;">
</iframe>

• メリット: スマホでも比較的安定して閲覧できる。

• デメリット: PDFをGoogleのサーバーが読み取る必要があるため、社内イントラなどの非公開環境では使えません。

---

3. PDF.js を使う（プロフェッショナル・多機能）

Mozillaが開発しているJavaScriptライブラリです。PDFをWebページの一部として「描画」するため、ブラウザに左右されず、最も高度なカスタマイズが可能です。

• 主な特徴:

  • 全デバイスで統一された見た目。

  • 「印刷禁止」や「テキスト選択不可」などの独自制御が可能。

  • 設置には、ライブラリのファイルをサーバーにアップロードする必要があります。

---

比較表：どの方法を選ぶべき？

手法	難易度	スマホ対応	非公開ファイル	備考
<iframe>	低	△	◯	PCメインのサイトならこれで十分
Google Viewer	低	◯	×	公開URLであれば最も確実
PDF.js	高	◎	◯	独自のUIや高度な制御が必要な場合

---

注意点：スマートフォン対応について

多くのスマホブラウザは、PDFの「埋め込み表示」を自動で「ダウンロード」や「別タブ表示」に切り替えます。

確実に見てもらいたい場合は、埋め込みとは別に 「PDFをダウンロード（別ウィンドウで開く）」というボタンやリンクを設置しておく のが親切な設計です。

コピー用のアイコンをご希望とのことですので、以下のボタンからこの回答をコピーしていただけます。

📋 [この回答をコピーする]

次は、具体的なコードのカスタマイズ（サイズ指定や初期表示ページの設定など）について詳しくお伝えしましょうか？