経緯
オープンソースなタイムトラッキングアプリ「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だけでここまで綺麗にレイアウトできました。素晴らしいですね。
