[CSS]画面印刷時に背景色がつかない問題の対処法

概要

ブラウザで印刷をする際に、背景色が付かない、、という問題に当たった。

印刷対象画面

印刷時

背景色つかない。。

正直、印刷する想定の画面は、普段実装しないのでよくわからなかったのですが、案外簡単にできました。

CSSで何行かコード書くだけで済みます。

コード

.print-wrap {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

できた

印刷対象画面

印刷時

解説

print-color-adjustというのは、印刷時に色調整などをするのか、しないのかを設定するプロパティです。

デフォルト値がeconomyなのですが、これを使うとインク代節約などの意味合いで勝手に白黒印刷になったりする。
結果背景色が付かないという感じ。

exactにすると、色の調整を行わずに正確に表示します。

ブラウザサポートとしてはOperaだけ(2025/04/21時点)対応してないです。
ChromeとEdgeは、試験的なサポートという感じで安定しないかも。
一応ChromeとEdgeで見ましたが問題なし

https://developer.mozilla.org/ja/docs/Web/CSS/print-color-adjust

感想

印刷想定した実装はあまりやらないので、新しいことを知れました。