印刷すると崩れる・はみ出すときの対処

印刷で崩れる理由

画面と紙はそもそも前提が違います。画面は幅に合わせて伸縮し、スクロールできますが、紙は決まったサイズで区切られ、横にはみ出したぶんは切れてしまいます。画面向けに最適化したレイアウトをそのまま印刷すると、この違いが崩れとして表れます。

また、固定配置の要素や背景色、横並びのレイアウトは印刷で扱いが難しく、意図しない位置に出たり、背景が印刷されなかったりします。印刷を想定するなら、印刷時専用の指定を用意するのが基本です。

崩れの典型パターン

印刷で起きる崩れにはよくある型があります。プレビューを見て、どれに当たるかを確認しましょう。

• コンテンツ幅が紙幅を超えて右側が切れる・はみ出す
• ヘッダーやナビ、ボタンなど画面専用の要素が紙に出てしまう
• 背景色や背景画像が印刷されず、白地で文字が読みにくい
• 表や画像がページの切れ目で分断される
• 固定配置の要素が各ページに重なって出る

症状別チェック表

印刷すると崩れる・はみ出すは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

印刷向けに整える手順

印刷の崩れは、印刷時だけ適用される指定を足すことで多くが解決します。次の順に進めてください。

1. ブラウザの印刷プレビューを開き、どこがはみ出す・切れるかを具体的に確認する
2. 印刷時専用のスタイル（printメディア向けの指定）を用意し、画面用と分ける
3. ナビやボタンなど不要な要素を印刷時に非表示にする
4. 幅を紙に収まるよう調整し、横スクロール前提の固定幅を見直す
5. 表や見出しがページ境界で割れないよう、改ページの扱いを指定する
6. 用紙サイズと余白をページ設定で整え、再度プレビューで確認する

ページ設定と背景の扱い

用紙サイズや余白は、印刷向けのページ設定で指定できます。A4などの想定サイズに合わせて余白を確保すると、端の切れを防げます。背景色や背景画像を紙にも出したい場合は、ブラウザの印刷ダイアログで「背景のグラフィック」を有効にする必要があるため、利用者への案内も検討します。

改ページは、表の行や見出しがページの切れ目で分断されないように扱いを指定すると読みやすくなります。画像が大きすぎてはみ出す場合は、印刷時に幅を紙に収まるよう調整しておくと安定します。

印刷確認を関係者と共有する

印刷結果はプリンタやブラウザ、OSによって差が出ることがあり、自分の環境だけでは判断しきれません。実際に印刷やPDF化して確かめてほしい相手に、ページをすぐ渡せると確認がスムーズです。

ギガサイト便なら、印刷向けに調整したHTMLやZIPをドロップして共有URLを発行し、相手はそのURLを開いて自分の環境で印刷プレビューやPDF出力を試せます。同じURLのまま差し替えられるので、印刷指定を直すたびにリンクを送り直さず再確認を頼めます。社外と共有する確認URLには認証と公開期限を設定しておくと安心です。