HTMLをPDFに変換する方法

· 5 分で読めます

HTMLからPDFを作成する作業は、請求書、レポート、レター、証明書など、CSSでレイアウトを制御しつつPDFとして配布したい文書を生成するときに役立ちます。ブラウザベースのHTMLからPDFへの変換ツールは、ブラウザ自身のレンダリングエンジンを使うため、結果はライブプレビューに表示されているものとそのまま一致し、サーバーへのアップロードは一切発生しません。

HTMLをPDFに変換する手順

  1. HTMLを貼り付ける: インラインCSSや<style>タグを含むHTMLコードをエディタに入力します。ヘッダー、テーブル、画像、スタイルを含む完全なページ構造をそのまま記述できます。
  2. 出力をプレビューする: ライブプレビューが、入力に合わせてPDFがどのように見えるかをリアルタイムに表示します。HTMLとCSSを調整し、希望どおりの見た目になるまで反復します。
  3. 生成してダウンロード: 生成ボタンをクリックするとブラウザ内でPDFが作成され、すぐにダウンロードできます。

作成できる文書の例

HTMLからPDFへの変換、簡単な歴史

Web初期(1995年から2005年)には、HTMLからPDFを作成するにはサーバーサイドのツールが必要でした。Apache FOP(1999年)、PrinceXML(2002年)、wkhtmltopdf(2010年)などはすべてバックエンドサーバーで動作し、コンテンツのアップロードが必要でした。各レンダリングエンジンがCSSを異なる方法で実装していたため、出力品質は大きく異なりました。

ブラウザ側での変換は2014年頃に、jsPDFやhtml2pdf.jsといったライブラリで実用的になりました。これらはHTML5 Canvasを使ってコンテンツをラスタライズします。結果は単純な文書には十分でしたが、複雑なレイアウトや選択可能なテキストには対応できませんでした。

転機になったのは2017年のChromiumのヘッドレスモードです。これはChromeが通常のページで使うのと同じレンダリングエンジンを公開しました。Puppeteer(Node.js、2017年)はサーバーサイドのChromium PDF生成を開発者にとって扱いやすくしました。現在のブラウザベースの変換ツールは、Print API(window.print())を@page CSSルールとともに使用し、Chromiumのヘッドレスモードと同じパスを通るため、プレビューとPDFが同一の出力になります。

2026年時点では、ほとんどの文書にとってブラウザベースのHTMLからPDFへの変換が正しい選択です。サーバーサイドのレンダリングが理にかなうのは、非常に大きな文書(100ページ以上)、自動バッチ処理、複数ソースからのPDFをマージする必要がある場合だけです。

PDF出力のためのスタイリングのコツ

インラインスタイルか<style>タグを使う: 外部スタイルシートは読み込まれません。CSSは要素のインラインに記述するか、HTML内の<style>ブロックに置きます。

ページ余白を設定する: CSSの@page { margin: 20mm; }を使って、PDF内のコンテンツ周りの余白を制御します。

印刷向けの単位を使う: mm、cm、ptは、pxやremよりもPDFで予測しやすい単位です。実寸に対応する余白や間隔にはmmを使いましょう。

ビューポート依存のレイアウトを避ける: パーセント幅と固定ピクセル幅が最も安定して動作します。ビューポート単位(vw、vh)はPDF出力で期待どおりに動かないことがあります。

ページ区切りを制御する: page-break-before、page-break-after、page-break-inside(または新しいbreak-before、break-after、break-inside)を使って、新しいページがどこから始まるかを制御します。break-inside: avoidは、単一のブロックがページをまたいで分割されるのを防ぎます。

PDF専用ルールには@media printを使う: @media print { ... }の中にあるCSSは、PDF生成時にのみ適用され、プレビューには影響しません。ナビゲーションバーなど画面専用の要素を非表示にするときに便利です。

CSS印刷モードの例

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

ページサイズ

よく使われる@pageのサイズ値:

横向きにするにはlandscapeを追加します: size: A4 landscape。

よくある落とし穴

検討に値する代替手段

日常のビジネス文書(請求書、レポート、証明書)には、ブラウザのHTMLからPDFへの変換ツールが速く、同じくらい洗練された結果を出してくれます。

使いこなしのヒント

プライバシーと機密文書

HTMLからPDFへの変換ツールは完全にブラウザ内で動作します。貼り付けたHTML、埋め込んだ画像、生成されたPDFはすべてデバイス上に留まります。サーバーへのアップロード、ロギング、第三者との共有は一切ありません。

これはHTMLからPDFへの入力がしばしば機密性を帯びるからです。たとえば、顧客名を含む請求書データ、価格条件を含む契約書ドラフト、財務数値を含む内部レポート、個人情報を含む証明書などです。クラウド型のHTMLからPDFサービスは、設計上、HTMLをサーバーに送信し、そこでPDFを生成して返します。一部のサービスは「改善」や分析のために入力を保持します。機密情報を含む文書には、ブラウザベースの変換ツールの方が安全です。

ブラウザベースの変換は、ページを一度読み込めばオフラインでも動作し、HTMLを反復編集する際に即座にフィードバックが得られる速さがあります。

これらのツールを試す

HTMLからPDFへの変換 MarkdownからPDFへの変換 HTMLフォーマッター

よくある質問

PDFはCSSスタイルを保持しますか?

はい。コンバーターは、色、フォント、余白、レイアウトを含むCSSが適用されたHTMLをレンダリングします。PDFは生のソースコードではなく、レンダリングされたWebページのように見えます。

PDFに画像を含めることができますか?

はい。最も信頼性の高い結果を得るには、base64画像(データURI)を使用します。外部画像URLは、アクセス可能でCORS互換であれば動作する可能性があります。

HTMLはサーバーに送信されますか?

いいえ。変換は完全にブラウザ内で行われます。コードと生成されたPDFはデバイスを離れることはありません。

どのCSS機能がサポートされていますか?

レイアウト、色、フォント、背景、ボーダー、テーブルを含む標準CSSはよくサポートされています。CSS Grid、複雑なアニメーション、一部のFlexboxエッジケースなどの高度な機能は制限される可能性があります。