HTML to PDF — ブラウザで HTML ファイルを PDF に変換
HTML ファイルやスニペットを PDF に変換します。スタイル、改ページ、印刷ルールを保持し、すべてブラウザ内で完結します。アップロード不要、制限なし。
HTML to PDF
Convert HTML files to PDF documents. Works entirely in your browser — no uploads, no limits.
HTML ファイルをここにドロップ
またはクリックして参照(最大 50MB)
HTML to PDF は、長年にわたり十数ものソリューションが登場してきたにもかかわらず、いずれも完璧とは言えない変換の一つです。課題は、HTML が流動的でレスポンシブなメディアであるという点にあります — コンテンツはビューポートに合わせてリフローし、作成者はレイアウトの決定をブラウザに委ねます — 一方 PDF は座標が固定されたメディアであり、すべてのグリフは特定のページの特定の位置に正確に配置されます。優れた HTML-to-PDF ツールは、画面レンダリングのためにブラウザが行うのと同じレイアウト判断を行い、その後すべてを紙が保持できる座標グリッドに固定する必要があります。本ツールは、Chrome の Print ダイアログを動かすのと同じレンダリングパイプラインを使用しており、これは Web 上でこの問題の事実上の参照実装となっています。
HTML-to-PDF について自明ではない点は、print stylesheet です。ほとんどの手書き HTML には、ナビゲーションを非表示にしたり、背景を削除したり、紙面用に再整形したりする @media print ブロックがあります。このブロックが存在する場合、PDF 出力はクリーンで予測可能です。存在しない場合、PDF 出力には画面に表示されているすべてのものが含まれます — サイドバー、sticky ヘッダー、現在は静的になったホバー効果、フレーム 0 で凍結されたアニメーション。HTML-to-PDF の適切な準備は、print stylesheet を作成するか、変換前に印刷向けバージョンに差し替える ?print パラメータを追加することです。
最終的な引き渡しについて:既存の Web ページの忠実なレンダリングが目的であれば、まず print stylesheet を作成してください — 紙面に属さない部分を非表示にする数十行の CSS です。チャットやメールからの HTML スニペットの迅速な変換が目的であれば、本ツールは screen レイアウトで数秒で使える PDF を生成します。Web ページの長期アーカイブが目的であれば、元の HTML とアセットを PDF と一緒に保存してください — HTML は検索・編集・バージョン管理に適しており、PDF は変換時点で凍結されたスナップショットです。
使い方
HTML を貼り付けるかファイルを読み込む
生の HTML をエディタに貼り付けるか、.html ファイルを読み込むか、URL を指定します(ネットワークが許可されている場合)。ツールはソースのスタイルを保持し、安全のためスクリプトは除去され、アクセス可能な外部 CSS はインライン化されます。
ページ設定を選択
A4 または Letter、縦向きまたは横向き、およびマージンプリセットを選択します。ソースの CSS `@page` ルールと `page-break-before` プロパティを尊重するオプションをオンにします — 多くの手書き HTML では自然な改ページのためにこれらが使われています。
PDF をダウンロード
レンダラーが HTML をレイアウトし、同じソースに対して Chrome の Print ダイアログが生成するのと一致する PDF を作成します。ページ数とファイルサイズはダウンロードボタンの上に表示されます。
よくある質問
CSS @media print ルールは尊重されますか?
はい — レンダラーはレイアウト時に print stylesheet を使用します。HTML に `@media print` ブロックがあり、ナビゲーションを非表示にしたり印刷用に再整形している場合、それらのルールが適用されます。print stylesheet が存在しない場合は screen stylesheet が使用され、出力にナビゲーションやサイドバーなど、紙面上に望ましくない要素が含まれる可能性があります。
外部のスタイルシートや画像は読み込まれますか?
HTTPS 経由でアクセス可能な外部 CSS ファイルは、レンダリング前に取得されインライン化されます。HTTPS 経由でアクセス可能な画像も読み込まれます。ローカルのファイルパスや `file://` URL はブラウザのコンテキストからアクセスできません — HTML をサーバーにホストするか、変換前にアセットをインライン化してください。
ページ内の JavaScript は実行されますか?
デフォルトでは、安全性と出力の決定論的動作を保つため、スクリプトはレンダリング前に除去されます。JS を実行しない 1 回のパスで安定した PDF が生成されます。ページがレイアウトに JS を依存している場合(React アプリ、Vue SPA)、ハイドレーション前の静的 HTML がレンダリングされます。
改ページを制御できますか?
はい — 任意の要素に `page-break-before: always`(または最新の `break-before: page`)を追加すれば、その箇所で強制的に改ページできます。レンダラーは従来の CSS 2.1 構文と CSS Fragmentation Module Level 3 構文の両方を尊重します。
PDF ではどのフォントが使用されますか?
レンダリングマシンで利用可能なシステムフォントが使用されます。アクセス可能な URL から `@font-face` でホストされている Web フォントはダウンロードされ埋め込まれます。フォントが利用できない場合、ブラウザはメトリクスが等価な代替フォントに置き換えます — レイアウトがわずかにずれる場合があります。
制限事項
- JavaScript は実行されないスクリプトはレンダリング前に除去されます。コンテンツのレンダリングに JS を依存する SPA(React、Vue、SSR なしの Angular)は、ハイドレーション前の空のシェルの PDF を生成します。サーバーサイドレンダリングされた HTML または静的ページが適切な入力です。
- 外部アセットはアクセス可能である必要がある外部 CSS、画像、フォントはレンダリング時にネットワークから取得されます。認証、`localhost`、ファイアウォールの内側にホストされているページは、不完全な出力を生成します。変換前にアセットをインライン化するか、パブリック URL でホストしてください。
- print stylesheet が前提`@media print` ブロックがない場合、スクリーンレイアウトが使用され、ナビゲーション、サイドバー、紙面に適さないヒーロー画像などが含まれる可能性があります。変換前に print スタイルを追加するか、不要な要素を取り除いてください。
プラットフォーム別の注意点
- macOS
- Safari の「ファイル > PDFとしてエクスポート」は本ツールと同様のレンダラーを使用しています。ソース HTML がチャット、メール、CMS のエクスポート内にあり、Safari の Print ダイアログを開くためのセットアップに時間をかけたくない場合、ブラウザツールが適切な選択肢です。
- Windows
- Microsoft Edge の Print ダイアログは本ツールの動力を担うのと同じ Chromium レンダラーを使用しています。ソースがメールや CMS エクスポートの HTML で、Edge 経由で印刷せず迅速に変換したい場合、ブラウザツールが適切な選択肢です。
- Linux
- コマンドラインでの作業には、`wkhtmltopdf input.html output.pdf` や Chromium のヘッドレスモード(`chromium --headless --print-to-pdf=output.pdf input.html`)が最も近い代替手段です。ブラウザツールは、チャットやメールから貼り付けた HTML をワンショットで変換するのに適しています。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。CLI ツールやヘッドレスブラウザをインストールできない制限のある環境で有用です。