Webページの印刷用CSSの基本｜文字切れ・改ページを確認する方法

紙やPDFでは幅とページ区切りを確認

案内や手順を印刷したら、右端の表が切れ、メニューだけで一枚使われた。画面で見やすい配置が、そのまま紙でも読みやすいとは限りません。PDFへ印刷する場合も、ページ単位の区切りを考える必要があります。

@media printで印刷用のスタイルを指定

印刷時だけ適用する指定は、CSSの「@media print { … }」の中に記述します。例えば印刷不要の操作欄にno-printというクラスを付けた場合、「@media print { .no-print { display: none; } }」と指定できます。クラス名は説明用の例なので、自分のHTMLに合わせてください。

用紙の余白などは@pageで指定する方法もあります。MDNでは、印刷専用のスタイルシートをmedia="print"で読み込む方法も紹介しています。既存のCSSの詳細度や適用順によって結果は変わるため、指定を加えた後のプレビューで確認します。

非表示にするのは必要な情報を整理してからです。ページ名、見出し、重要な注記まで消さず、印刷物だけを受け取った人が内容を理解できるようにします。

印刷プレビューで表・見出し・末尾を確認

確認したいのは、一枚目の見栄えだけではありません。途中の表や写真が切れていないか、見出しだけがページ末に取り残されていないか、最後の注意書きまで出ているかを見ます。

用紙サイズや余白、ブラウザーの設定でも結果は変わります。画面のスクリーンショットを印刷した状態と混同せず、実際の印刷プレビューで確かめます。

印刷物だけで必要な情報が読めるか確認

私なら、予約内容や手順のページは、印刷したあと単独で読めるかを気にします。印刷を選ぶ理由には、現地で通信できない、誰かへ手渡したいなど、画面とは違う事情がありますよね。

使いやすさはブラウザーの中だけで終わりません。必要なページから一つ印刷してみるだけでも、見落としていた不便を発見できそうです。