あのとき苦労した印刷用cssが一瞬で実装できるようになって感動した話

昔は当たり前のように実装していた印刷用css。

今はほとんど実装することはないと思いますが、それでもたまに依頼を請けることがあります。まぁ、物件情報とか募集要項とかそういうの、印刷したい人もいるかもしれませんね。

この印刷用css、昔はめっちゃ手間だったんですが、最近のcss3ではいとも簡単に実装できてしまうので、さらっと紹介したいと思います。

実装

まずhtml側のheadには、以下のように書きます。

media=”print”と書かれているのがミソですね。

こいつを書くことで、「印刷するときはこのcss使うよー」とブラウザに指示することができます。

そして、肝心のprint.cssは以下のように書きます。

こんだけ~!?(IKKO)

昔からやってる人は泣いてないですか?大丈夫?

ちょっとだけ説明すると、

@media print

で囲まれた部分が、印刷用のときだけ適応されるcssです。headでも指示してるので正直いらないんですが、まぁわかりやすくていいですよね。

@page

は、印刷用の紙のスタイルを設定できます。ここでは、余白を19.05mmにしてあります。なんでこんな細かい数値にしたか忘れましたが、たぶんどっかからコピペしたんだと思います。

bodyは、「横幅どれくらいのときの見た目で印刷するか」をwidthで指定し、さらにそれをtransform:scaleでいい感じに縮小してやります。この辺りは、横幅によって値が違うので、印刷画面を見ながら調整しましょう。

-webkit-print-color-adjust: exact;

というのは、Google Chromeで印刷するときでも背景を表示させるためのおまじないです。

印刷のときにはheaderとかfooterとかいらない場合が多いので、要らない部分はdispay:none;で隠しちゃいます。

あとは、:nth-childとかが印刷のとき効いてなかったりするので、そういったところは仕方ないので個別に対応していきます。

楽だわ~

印刷用デバッグ

Google Chromeのデベロッパーツールを使って、印刷するときの表示をデバッグすることもできます。

デベロッパーツールの下の方に「Rendering」というタブがあるので(なかったらConsoleの横のメニューを開いて、表示させてください)、そこをクリックして、「Emulate CSS Media」のセレクトボックスから「print」を選択するだけです。簡単ですね!

以上、現場からでした。

フォローする