HTMLでWebページにPDFファイルを埋め込む方法【初心者向け】

iframe要素を使ってPDFファイルを埋め込む基本

WebページにPDFファイルを埋め込む最も手軽な方法は、<iframe>要素を使うことです。src属性にPDFファイルへのパスを指定するだけで表示できます。

<iframe src="path-to-your-file.pdf"></iframe>

これだけで、ページ内にPDFビューアが表示され、ユーザーはスクロールやズーム操作でドキュメントを閲覧できるようになります。

iframeの枠線を消す方法

iframe要素はデフォルトで枠線（ボーダー）が表示されるため、見た目が気になる場合があります。この枠線はframeborder属性に「0」を指定することで非表示にできます。

<iframe src="path-to-your-file.pdf" frameborder="0"></iframe>

幅と高さを指定してレイアウトを整える

実用的な埋め込みを行うには、iframeの幅と高さを明示的に指定するのがおすすめです。指定方法は、外部CSSのクラスを使う方法と、インラインスタイルを使う方法の2通りがあります。

以下の例では、widthに100%を設定し、親コンテナの幅いっぱいにiframeが広がるようにしています。これはレスポンシブ対応の観点からも良いプラクティスとされています。

さらにheightには50vhを指定しています。「vh」はビューポート（画面）の高さを表す単位で、50vhは閲覧している画面の高さの50%をiframeが占めるという意味になります。

<iframe
  src="path-to-your-file.pdf"
  style="width:100%;height:50vh;"
  frameborder="0"
></iframe>

幅と高さの値は、プロジェクトのデザインや用途に合わせて自由に調整してください。モバイル端末での表示を考慮する場合は、メディアクエリと組み合わせるとより柔軟なレスポンシブ設計が可能です。