ブラウザの「印刷」機能を使って、ホームページをプリントアウトしたいとき、ヘッダーが本文にかかったり、写真がとても大きくなったりと、ホームページのレイアウトとは異なってしまって、きれいに印刷できないことがあります。その理由は、「print.css」が設定されていないからです。

「print.css」って何？
もう何年も前の話ですが、WEBサイトを構築するときは、「A４サイズできれいにプリントアウトされること」が求められていました。どのページにも置かれているメニューはプリントアウトせず本文だけをA4に収まるように「print.css」を作っていました。長いページになるときは区切りのいいところで「ここで次のページに行くように」という指定もおこなっていました。

それぞれのお客様がお持ちのプリンターに依存するので、必ずしも同じように出力されるわけではないのですが、ページをPDFとして保存したいときにも「print.css」でレイアウト指定されていれば整ったPDFができるので、画面を記録したいときには便利でした。

私は編集担当として、さまざまな情報を資料とすることが多く、参考にしたページは必ずPDFとして記録しておきます。出典が何なのかの根拠を残しておかなければいけないからです。しかし、ホームページは書き換えられてしまうので、URLを記録しておいただけでは、後にアクセスしたとき当時の情報が消えてしまっているという事態が起こることもあります。ですから、本当はホームページをそのままPDF化したいのですが、「print.css」が設定されていないページは、ブラウザの印刷機能では整ったPDFにはできません。その場合は、スクリーンショットを撮っておきます。いわゆる「魚拓」ですね。

そういう苦労？があるので、本当はすべてのページに「print.css」を設定しておいてほしいな〜というのが正直なところです。ですが、SDGｓが大事な現在では、「紙で出力すること」は推奨されなくなっていますね。ほとんどのWEBサイトには「print.css」が設定されていません。

ページの性格上、紙やPDFで出力することが想定される場合は、「print.css」を設定することをおすすめします。