【2023.10.29】印刷機能を改善しました!(背景色等を印刷に反映)

印刷機能改善

印刷機能を改善し、よりきれいに印刷ができるようになりました!

改善前

改善後

プログラムの解説

エンジニアの方に向けて、追記したCSSを紹介します。

このhtmlに適用されているcssの最後に、以下のコードを追加します。

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
まず、@media print で印刷時に設定されるCSSとして設定します。
次に、(-webkit-)print-color-adjust: exact; で要素の背景色などを強制的に反映させるよう設定します。
参考にさせていただいたサイトはこちらです。
[blogcard url=https://ensei1375.com/print-background/#toc1]

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA