ホームページを印刷すると切れるとき｜ブラウザーの設定と印刷用CSSの点検

ホームページを印刷すると文章や表が切れるときは、まず対象URL、ブラウザー、用紙、倍率を揃えてプレビューを確認してください。画面上では読めても、紙の幅や改ページで必要な情報が欠ける場合があります。縮小して収まることと、文字が読めることも別です。

企業の更新担当者が症状を整理し、制作会社へ印刷時の修正を依頼するための手順です。完成済みのPDFをサイトへ掲載する仕事はPDF公開ガイドで扱い、ここではHTMLページをブラウザーから印刷する場面を説明します。

1. 紙に残す目的と必要な情報を決める

利用案内、商品仕様、社内の検討資料など、紙で読んだ後の使い方を決めます。本文だけでよいのか、条件、図、表、問い合わせ先、確認日も必要なのかを先に揃えます。印刷枚数だけを減らして、判断に必要な注記を落とさないでください。

フォームへの入力や予約は、印刷した紙だけで実行できるとは限りません。紙で使える手順とWebで行う手続きを分けて案内します。古い資料が残ることを考え、版や確認日を必要に応じて示します。

2. 対象URLと印刷条件を揃える

プレビューの基準条件を残す

同じページを開き、ブラウザーの印刷プレビューで用紙サイズ、縦横、倍率、余白、ヘッダー・フッター、背景の印刷を確認します。設定名はブラウザーや端末で異なります。以前の設定が残っていないかも見てください。

試す条件を一度に変えると原因を見失います。まず通常の条件を記録し、倍率、向き、余白を一つずつ変えて比較します。「別の担当では正常」という場合は、URLと版、ブラウザー、設定が同じかを確認してください。

共有してよい情報を確認する

社外へ渡す印刷物では、内部の管理画面URL、入力中の顧客情報、ログイン時だけの表示が混ざっていないか確認します。印刷してよい対象と、保存・共有してよい相手を揃えます。

3. 切れる箇所を、文章・表・画像に分ける

文章が右側で切れるなら、幅の固定、長い文字列、印刷時の折り返しなどを調べます。表が欠けるなら、画面用の横スクロール領域や列幅が紙面でどう扱われるかを確認します。倍率を下げるだけでは小さすぎる表になることがあります。

画像は横幅だけでなく、ページの高さを超えていないか、必要な文字が読める解像度かを見ます。固定された高さや切り抜きの指定が、印刷でも適用される場合があります。画面用の装飾と、資料として必要な範囲を分けてください。

制作会社へは「崩れています」ではなく、「このURLの仕様表の右端がA4縦・倍率100%で欠ける」のように伝えます。印刷見本と条件を揃えると、同じ状態を再現して調査できます。

4. ヘッダー・固定部品・閉じた内容を確認する

固定部品を紙で確認する

画面の固定ヘッダーや問い合わせボタンが、紙では本文へ重なることがあります。メニューや追従部品を印刷用に整理する場合も、社名や必要な窓口まで消さないようにします。

折りたたみやタブで非表示になった説明が、印刷でも欠ける場合があります。印刷する前に開く必要があるのか、印刷時に必要な内容を出す実装にするのかを決めます。表示されていない注記を読者が紙で判断できるとは考えません。

紙で使える説明を残す

動画、地図、操作ボタンは紙では同じように使えません。必要な代替説明や参照先を残します。表示上の不要な部品を整理する仕事と、本文の情報を削除する仕事を区別してください。

5. 印刷用CSSは試験環境で対象を絞る

MDNは、印刷向けのスタイルシートやCSSのprintメディア、ページの寸法・向き・余白を扱う@pageを説明しています。MDNの印刷用CSSガイド。画面用の見た目をそのまま縮めるだけでなく、紙に合わせた表示を用意する方法です。

企業の担当者は、テーマへ汎用コードを直接貼る前に、修正する部品と影響するページを確認してください。制作会社は現在のCSSの優先順位、表の出力、テーマと追加機能の役割を調べ、試験環境で範囲を絞って変更します。

不要な部品を非表示にする、本文を紙の幅へ合わせる、改ページを調整する場合も、長い記事や別の表で再確認します。特定のブラウザーで正常になったことを、すべての印刷環境で正常と報告しません。

6. プレビュー・保存PDF・実際の紙を比較する

まずプレビューの全ページで見出し、段落、表の右端、画像、注記を確認します。ブラウザーからPDFへ保存して読む試験は便利ですが、プリンターの余白や紙の条件まで同じとは限りません。配布する用途では、必要な条件の実際の紙も確認します。

印刷用の修正後は、通常画面のPC・スマートフォンも読み直します。画面用CSSへ影響した場合は、印刷が直ってもサイト修正の完了とはしません。公開した版、確認条件、残る未検証の環境を記録します。

7. 紙で使えるリンクと更新管理を整える

「こちらをクリック」だけでは紙から移動先を判断できません。リンクの目的や必要な公開URLを文章で示します。長い計測URLをそのまま紙面へ並べると読みづらいため、必要な案内方法を別に検討します。

保存PDFや印刷物は、Webを更新しても自動的に新しくなりません。料金や日程を紙へ含めるなら、確認日、現行情報の確認先、更新担当を残します。正式な条件を制作担当者が推測して補いません。

点検の効果は、印刷できた回数だけでなく、必要な案内が欠けずに読めること、担当者が再現して確認できること、修正と維持の工数で見ます。印刷向けの形式が複雑なら、HTMLの整理や別資料の役割分担も選択肢です。

8. 点検メモを作り、必要な実装修正を相談する

URL、版、ブラウザー、用紙・倍率・余白、欠ける箇所、必要な内容、正常な完成状態をメモにまとめます。設定の変更で読めるなら、自社でその条件を案内できます。テーマの出力や表の構造が原因なら実装側へ相談します。

Acquaの企業向けWeb支援へは、更新・表示修正の対象と印刷用途を伝えてください。制作会社はWordPress実装支援で、現行テーマ、CSS、共通部品、検収する環境を共有します。対応可否と費用、試験・公開の範囲は確認して合意します。

解決の状態は、必要な文章・条件・表・画像を合意した印刷環境で読め、通常のWeb表示も維持できることです。相談窓口へ再現条件を添えると、調査する対象を絞れます。実際の印刷をしていない確認は、プレビューまで確認済みとして記録してください。

一次資料の確認日：2026年10月6日。ブラウザー、テーマ、プリンターで条件が異なるため、用途に必要な範囲を実際に試します。