Webページを印刷する方法｜見たままの状態で紙に出す手順

Webページの印刷は Ctrl + P（Macは ⌘ + P）で始まります。手順そのものは3秒です。困るのはそのあと——画面で見ていたものと、プレビューに出てくるものが違うときです。

私はArchiveSealというWebページ保存用のChrome拡張機能を開発していて、「見たまま出したい」という要望に実装側から向き合ってきました。ここでは基本の手順と、ずれたときの調整を順に書きます。

基本の手順

印刷したいページを開く
Ctrl + P（Macは ⌘ + P）を押す
プレビューを確認する
送信先でプリンターを選び、印刷する

送信先を「PDFに保存」にすれば、紙に出さずにファイルとして残せます。印刷とPDF保存は同じ経路なので、この記事の調整はどちらにも効きます。Chromeでの手順はChromeでWebページをPDFに保存する方法にまとめました。

画面と印刷結果がずれる理由

そもそもの話として、画面用の見た目と印刷用の見た目は別々に用意されています。

Webページの見た目はCSSという仕組みで指定されていて、そこには「画面で見るとき」と「印刷するとき」を分けて書ける機能があります。印刷用の指定を丁寧に書いているサイトなら、印刷しても崩れません。

崩れるサイトは、印刷用の指定が用意されていないか、画面幅を前提にした作りになっているかのどちらかです。

つまり原因は閲覧側ではなくサイト側にあることが多く、こちらでできるのは出力側の調整になります。

ブラウザ側でできる4つの調整

プレビュー画面の「詳細設定」を開くと、次の項目があります。効く順に並べます。

1. 倍率

一番効きます。「用紙に合わせる」で収まらない場合は「カスタム」を選び、数値を下げてください。横に長いページなら60〜70、要素の多い業務システムの画面なら30〜50まで下げることもあります。

2. 余白

「デフォルト」「なし」「最小」から選べます。「なし」にすると端まで使えますが、プリンターによっては物理的に印刷できない領域があり、そこは出ません。

3. 背景のグラフィック

既定ではオフです。オンにすると、背景色や背景画像が印刷されます。白抜き文字が使われているページは、これをオンにしないと文字が消えます。逆に、インクを節約したいならオフのままにしてください。

4. ヘッダーとフッター

オンにすると、上下にページタイトル・URL・日付・ページ番号が入ります。あとで見返す記録として残すならオン、配布資料として使うならオフが目安です。

目的	倍率	背景	ヘッダー/フッター
資料として配る	用紙に合わせる	オン	オフ
記録として残す	用紙に合わせる	オン	オン（URLと日付が入る）
文字だけ読めればよい	自動	オフ	オフ

一部だけ印刷したい

ページ全体ではなく、必要な範囲だけ出したい場合です。

範囲を選択して印刷：本文をドラッグして選択し、印刷ダイアログで「選択した部分」を指定する。対応はブラウザによります
ページ番号で絞る：プレビューでページ数を確認し、「ページ」欄に 2-3 のように指定する
リーダーモードを使う：本文だけを抽出して表示する機能を使ってから印刷すると、余計な要素が落ちます

3つ目が手軽で、広告やサイドバーが混ざるページに効きます。

それでも合わないとき

調整しても収まらない、要素が重なる、途中で切れる——このあたりまで来たら、原因を切り分けてください。

症状	見るべき記事
レイアウトが崩れる・要素が重なる	WebページのPDF化でレイアウトが崩れるときの対処
右端や下端が切れる	PDFの印刷で端が切れるときの直し方
そもそも保存方法から選び直したい	WebページをPDFで保存する方法

一度PDFに落としてから印刷すると、切り分けが楽になります。

PDFの時点で崩れていればブラウザの出力の問題、PDFは正しいのに紙で切れるならプリンター側の設定の問題、と原因が分かれるからです。何度も紙を無駄にする前に、まずPDFで確かめてください。

拡張機能という選択肢

ブラウザの印刷機能で合わない場合、Chromeの拡張機能を使う方法もあります。ページを取得してから出力するタイプのものは、印刷用CSSの有無に左右されにくくなります。

私が開発しているArchiveSealもこの種のツールで、ページのDOMから本文を取り出したうえで、見た目を保った形で出力します。用途に応じてA4に分割した出力もできます。ただしすべてのページで完璧に再現できるわけではありません。動的に描画される部分や、スクロールに追従する要素は、そもそも紙という固定サイズに収まらないことがあります。

同種のツールは他にもあります。何を優先するかで選んでください。

よくある質問

Webページを印刷するにはどうすればいいですか？

印刷したいページを開いてCtrl + P（Macは⌘ + P）を押すと印刷プレビューが開きます。送信先でプリンターを選んで印刷してください。送信先を「PDFに保存」にすれば紙に出さずファイルとして残せます。印刷とPDF保存は同じ経路なので、倍率や余白の調整はどちらにも同じように効きます。

画面と印刷結果が違うのはなぜですか？

Webページでは画面で見るときの見た目と印刷するときの見た目を別々に指定できる仕組みがあり、印刷用の指定が用意されていないサイトでは画面幅を前提にした作りがそのまま出るためです。原因はサイト側にあることが多いため、閲覧する側でできるのは倍率や余白といった出力設定の調整になります。

背景の色や画像が印刷されません。

印刷ダイアログの詳細設定にある「背景のグラフィック」が既定でオフになっているためです。オンにすると背景色や背景画像も印刷されます。白抜き文字が使われているページではこれをオンにしないと文字が見えなくなります。逆にインクを節約したい場合はオフのままにしてください。

ページの一部だけ印刷できますか？

3つの方法があります。本文をドラッグして選択し印刷ダイアログで「選択した部分」を指定する方法、プレビューでページ数を確認して「ページ」欄に2-3のように範囲を指定する方法、ブラウザのリーダーモードで本文だけを表示してから印刷する方法です。広告やサイドバーが混ざるページには3つ目が手軽です。

調整しても紙に収まりません。

まず送信先を「PDFに保存」にして、PDFの時点で崩れているかを確認してください。PDFで既に崩れていればブラウザの出力の問題、PDFは正しいのに紙で切れるならプリンター側の設定の問題と切り分けられます。倍率を「カスタム」にして数値を下げるのが最も効きますが、それでも合わない場合は取得してから出力するタイプの拡張機能も選択肢になります。

まとめ

手順は Ctrl + P。送信先をPDFにすれば同じ経路でファイル化できる
ずれる原因は多くの場合サイト側に印刷用の指定が無いこと。出力側で調整する
効く順は倍率 → 余白 → 背景のグラフィック → ヘッダー/フッター
白抜き文字が消えるのは背景のグラフィックがオフだから
一部だけなら選択範囲・ページ番号・リーダーモードの3通り
収まらないときは一度PDFにして切り分ける。紙を無駄にする前に原因が分かる

画面と紙は別物です。合わせるのではなく、出力側で調整すると割り切ったほうが早く終わります。