Webページを印刷したら、右側がスパッと切り落とされていた。
表の右端の列が消えている。金額や日付が入るはずの欄が白紙になっている。サイドバーの途中でページが終わっていて、肝心の本文が半分しか出ていない…。
私も申込書のページを印刷して、記入欄の右半分が消えたまま窓口へ持って行きそうになったことがあります。あれは冷や汗ものでした。
この症状、プリンタが壊れたわけでも、インクが切れたわけでもありません。ページの作りが悪いせいだと決めつけるのも、まだ早いです。
ブラウザの印刷は、画面をそのまま写真に撮って紙に写しているわけではなく、用紙の幅に合わせてレイアウトを組み直す仕組みになっています。その幅に入りきらなかった部分が、右端でぶつっと切れる。これが右側だけ消える正体です。
そして直し方も、じつは印刷ダイアログの中にほぼ揃っています。倍率と余白、そして用紙サイズ。この3つを触るだけで、たいていの「右が切れる」は収まります。
ちなみに印刷プレビューの時点ですでに切れているなら、犯人はほぼ設定です。プレビューは実際の出力に近いものを表示しているので、ここで直せば紙を1枚も無駄にしません。
この記事では、Webページを印刷すると右端が切れる原因と、Chrome・Edge・Firefoxそれぞれで用紙に収める設定手順、それでも切れるときに見直すチェック箇所、さらに作り手側でできるCSSの対策までまとめて解説します。
印刷をやり直して紙を溶かしている人ほど、効くはずです。
なぜ右側だけが切れるのか
画面と紙のいちばん大きな違いは、幅が自由かどうかです。
ブラウザの画面は横幅を好きなだけ広げられますが、紙の幅は決まっています。A4縦なら210mm、そこから左右の余白を引いた残りが、印刷で実際に使える横幅です。
ブラウザは印刷のとき、この「用紙に印刷できる幅」を画面幅の代わりにしてページを組み直します。つまり印刷結果は画面のスクリーンショットではなく、細い画面で開き直したときの表示に近いものです。
ここで問題になるのが、用紙の幅より広いコンテンツです。ピクセル固定幅で作られた昔ながらのレイアウト、列数の多い表、埋め込みの地図やカレンダー、横スクロールで見せている領域。こういったものは用紙の外へはみ出します。
そしてブラウザは、はみ出したぶんを自動で縮めてくれるとは限りません。設定によっては原寸のまま流し込み、用紙からあふれた部分は単に出力されないだけです。右側が「切れている」のではなく、ページの幅が用紙に「入りきっていない」わけです。
だから対処も2択になります。ページを縮めて幅を収めるか、用紙側で使える幅を広げるか。印刷ダイアログの倍率と余白は、まさにこの2つを動かすためのつまみです。
まず試すのは「倍率」と「余白」の2か所
プリンタの電源を入れ直したりドライバを再インストールしたりする前に、印刷ダイアログの詳細設定を開きます。答えはたいていここにあります。
Chromeの場合
Ctrl＋P（Macは⌘＋P）で印刷画面を開き、「詳細設定」をクリックして展開します。
触るのは「倍率」です。初期値のままでは縮小がかからないことがあるので、「用紙に合わせる」に変更します。これだけでプレビューの右端が復活するケースがかなりあります。
それでも足りなければ「余白」を「最小」または「なし」に。使える幅が数センチ広がります。
なお背景の色や画像も紙に出したいときは「背景のグラフィック」にチェックを入れます。ここは初期状態ではオフです。
Edgeの場合
Edgeは項目名が少し違います。Microsoftの公式ヘルプでは「印刷するスケール」と呼ばれ、選択肢は「印刷可能領域に合わせる」「実際のサイズ」「カスタム」の3つです。
「実際のサイズ」は倍率をかけずに原寸で出すので、幅の広いページなら当然はみ出します。切れているならまず「印刷可能領域に合わせる」を選びます。
見落としやすいのは余白のほうです。公式の説明では「既定」は各辺に1インチ、「最小」は約0.25インチ（6.35mm）、「なし」は余白ゼロ。既定のままだと左右合わせて約5cmも余白に使われるので、A4の幅のうち4分の1近くを最初から捨てている計算になります。
幅が惜しい場面では、倍率をいじる前に余白を「最小」へ。それだけで収まることもあります。
Firefoxは「単純化」でごちゃごちゃを落とせる
Firefoxも考え方は同じで、印刷画面の詳細設定から倍率を変えられます。Mozillaのヘルプでは「用紙に合わせて縮小」を選ぶと大きさが自動で調整されると案内されています。用紙サイズ、余白、背景を印刷するかどうかも同じ場所にまとまっています。
Firefoxにはもう一つ手があります。「ページを単純化」です。ナビゲーションや広告、サイドバーを取り払って本文だけをすっきり印刷する機能で、余計な要素が消えるぶん、幅の問題ごと解決してしまうことがあります。
記事やレシピを紙で残したいだけなら、倍率と格闘するよりこちらが早いです。私も資料用にページを控えるときは、この機能に頼っています。
参考：Firefoxヘルプ
それでも切れるときに見直す4つ
倍率と余白を直しても切れる場合は、ブラウザの外側に原因があります。
用紙サイズが「レター」になっていないか
Chromeでは、印刷の用紙サイズが「レター」で始まってしまう環境があります。レターは幅215.9mm×高さ279.4mm、A4は幅210mm×高さ297mm。幅は広くて縦は短い、A4とは似て非なるサイズです。
レター前提で組まれた出力をA4に流せば、収まり方はずれます。用紙サイズがA4になっているか、念のため確認しておきましょう。
プリンタ側にも縮小設定がある
忘れがちなのがプリンタドライバの設定です。ブラウザ側で「用紙に合わせる」にしたのに、ドライバ側が原寸固定だと効き方が変わります。逆に両方で縮小がかかって、読めないほど小さく出てしまうことも。
印刷ダイアログの下にある「システムダイアログを使用して印刷」からプリンタ本体の設定も一度のぞいておくと、二重の縮小に気づけます。
向きを横にする
列の多い表やスケジュール表のようなページは、縦向きで粘るより横向きに切り替えたほうが読めるものが出ます。A4横なら使える幅は一気に297mmまで広がります！
いったんPDFにしてから印刷する
送信先を「PDFに保存」にしてファイル化し、Acrobat Reader側で用紙に合わせる設定で印刷する手もあります。ページの区切りを確認しながら刷れるので、失敗が減ります。
ひとつ私の失敗談も。最初は「画面を縮小してから印刷すればいいのでは」と考えて、Ctrl＋−でズームを80%まで下げて印刷しました。出てきた紙は1mmも変わっていません。画面のズームと印刷のレイアウトは別枠で計算されるので、直すべきは印刷ダイアログ側です。
関連記事：エクセルの印刷時に図形の位置がずれる場合の解決方法
作り手側の話｜CSSで切れないページにする
ここからは自分のサイトを持っている人向けの話です。読者が印刷したときに右が切れるページは、作り手側で防げます。
基本は印刷用のスタイルを用意すること。@media print の中で固定幅を解除して、用紙の幅に素直に流し込みます。
@media print {
body {
width: auto;
min-width: 0;
}
.table-scroll {
overflow: visible;
}
}横スクロールで見せている表を overflow: auto のままにしておくと、紙には今見えている範囲しか出ません。印刷時は visible に戻すのが定番の対処です。
用紙そのものの設定は @page で指定できます。
@page {
size: A4;
margin: 10mm;
}ヘッダーを position: fixed で固定しているサイトは、印刷すると全ページに巨大なヘッダーが刷り込まれることがあるので、印刷時は display: none で消しておくのが親切です。
確認はCtrl＋Pのプレビューで足りますが、開発者ツールのレンダリング設定でCSSのメディアタイプを print にエミュレートすると、崩れを直しながら詰められます。
参考：MDNのドキュメント
まとめ
Webページの右端が切れる問題は、プリンタの故障ではなく設定でほぼ決着します。
手順は3つだけです。印刷ダイアログの倍率を「用紙に合わせる」（Edgeなら「印刷可能領域に合わせる」）にする。余白を「最小」にする。それでも入らなければ用紙の向きを横にする。
特に効くのは余白です。Edgeの既定は各辺1インチなので、そこを最小に変えるだけで左右に約5cmぶんの余裕が生まれます。倍率をいじる前に触る価値は十分あります。
それでも切れるなら、用紙サイズがレターのままになっていないか、プリンタドライバ側で別の縮小がかかっていないかを確認。列の多い表なら、いったんPDFに保存してから刷るほうが安全です。
Firefoxを使っているなら「ページを単純化」を覚えておくと得をします。広告やメニューが落ちて、本文だけがきれいに収まります。
切れているのは紙が小さいからではなく、ページの幅が用紙に入りきっていないから。倍率・余白・用紙サイズの3点を押さえれば、たいていの「右が切れる」は紙1枚で片づきます。
紙で渡した資料は、そのまま相手の手元に残ります。右端が切れた紙を出してしまうと、内容以前に「確認していない人」に見えてしまうのが痛いところです。刷る前にプレビューを一度眺めるだけで防げます。
そして印刷されうるページを作る立場なら、公開前にCtrl＋Pまで一度押してみてください。5秒で終わるのに、読者が紙を無駄にする回数は確実に減ります。私はここを見ずに公開して、後から印刷用スタイルを慌てて足した口です。
