経緯

オープンソースなタイムトラッキングアプリ「Hackaru」を開発しているのですが、レポート画面を印刷したり、PDF出力したいといったフィードバックを多くいただきました。
そこで今回は、印刷フォーマットを整えるCSSについていくつか纏めてみました。

Before

何も設定せずにレポート画面を印刷した画面が以下です。
いい感じに崩れていますね。ここから直していきたいと思います。

mediaで印刷専用レイアウトを作成する

@media print を使って印刷専用のCSSを記述してあげます。
CSSなので display: none; などを使えば非表示にしたりしなかったりできます。

特に文字色については、薄い色を使っていると紙面では見づらいため、
濃いめの色(#000)に設定してあげると良さげです。


/** 通常のCSS */
body {
  color: #555;
}
.menu {
  display: block;
}
...
/** 印刷用のCSS */
@media print {
  body {
    color: #000;
  }
  .menu {
    display: none;
  }
}

背景色を表示する

インク節約のためか、デフォルトでは背景色(background-color)は表示されないようになっています。
そのため、print-color-adjust で背景色が表示されるように設定してあげます。

@media print {
  .logo {
    background-color: #000;
    -webkit-print-color-adjust: exact; /** for Safari, Chrome */
    print-color-adjust: exact; /** for Firefox */
  }
}

After

CSSだけでここまで綺麗にレイアウトできました。素晴らしいですね。

参考文献

https://developer.mozilla.org/ja/docs/Web/CSS/color-adjust
https://webtan.impress.co.jp/e/2015/07/28/20508