HTML ファイルをスタイルごと PDF に変換する

FreePDFチーム · 2026年8月1日

.html ファイルを誰かに渡すのは、思っているより頼りない話です。作った本人のパソコンでは正しく見えるのに、相手のところではスタイルシートが見つからず、別のブラウザでは組み方が変わり、そもそも添付ファイルとしてブロックされることもあります。PDF にしてしまえばページは固定されます。ファイルは一つ、どこで開いても同じ、印刷しても見えているとおりです。

持ち越されるもの、持ち越されないもの

.html または .htm をアップロードすると、ブラウザが印刷用に描くのと同じかたちで PDF に変換されます。変換する前に知っておく価値があるのは次の三点です。

ファイル内の CSS は適用されます。<style> ブロックや style= 属性に書かれたものは、フォント・色・罫線・表・背景まで持ち越されます。
JavaScript は実行されません。ページはファイルにある状態のまま描かれます。グラフや表が読み込み時にスクリプトで描かれる作りなら、PDF に入るのは空の入れ物だけです。
相対パスは解決できません。アップロードされたファイルには基準となるアドレスがないので、<img src="images/logo.png"> や <link href="style.css"> は指す先を持ちません。https:// から始まる絶対 URL なら通常どおり取得されます。

最後の点の対処は、ページを一枚のファイルにまとめることです。CSS は <style> ブロックに貼り込み、画像は完全な URL にするか data: URI として埋め込みます。HTML レポートを生成するツールの多くは、そしてブラウザの「ページを保存 → 単一ファイル」も、はじめからそうしています。

HTML を PDF に変換する

用紙と余白は CSS から指定できる

描画が印刷出力として行われるので、印刷向けの CSS はそのまま効きます。HTML を自分で生成しているなら、次のいくつかで十分に足ります。

@page { size: A4; margin: 20mm; } で用紙サイズと余白を決めます。レターサイズなら A4 を Letter に。
見出しに break-before: page を付けると、章ごとに新しいページから始まります。
表やカードに break-inside: avoid を付けると、二ページに切り分けられなくなります。
@media print 内の指定も効くので、ナビゲーションやバナーなど、そもそも印刷したくないものは PDF に入りません。

ブラウザの印刷ダイアログのほうが向いている場合

これはよくそちらが正解なので、はっきり書いておきます。生きているウェブページを PDF として保存したいなら、そのページを開いて PDF に印刷してください。ブラウザの手元には画像も読み込まれ、スクリプトも走り、ログイン状態のページが既にあります。アップロードされたファイルにはそもそも入っていないものが、そこには入っています。

ここでファイルを変換するのが向いているのは、手元に自己完結した .html がある場合です。メールで届いた請求書、スクリプトが書き出したレポート、ツールからのエクスポート、保存した領収書といったもので、ブラウザが端に刻むヘッダーやフッター、ページ番号の入らないきれいな PDF が欲しいときです。もう一つの利点は再現性で、同じファイルはどのマシンでも同じ PDF になります。設定が人それぞれの印刷ダイアログでは、そうはいきません。

なお、変換したいのではなく文書をこれから書くのなら、Markdown はこの問題をまとめて回避します。管理する CSS もなく、追いかける画像ファイルもありません。

Markdown を PDF に変換する

よくある質問

URL を渡すことはできますか？

いいえ、変換するのはアップロードされたファイルです。まずページを保存し（Ctrl+S / Cmd+S、単一ファイルの選択肢があればそれを選ぶ）、それをアップロードしてください。ログインの内側にあるページなら、自分で保存することがそもそも中身を取り出す唯一の方法です。

PDF にスタイルが当たっていません。何が起きたのですか？

ほぼ確実に、スタイルシートが別ファイルになっています。HTML は style.css を参照しているのに、アップロードされたのは HTML だけなので、読み込むものが存在しません。テキストエディタでファイルを開き、CSS を <head> 内の <style> ブロックに移してから、もう一度変換してください。