【保存版】CSS @media print で背景色を思い通りに！印刷時のデザインを自由自在に操るテクニック

2024-05-25

CSS @media print で背景色が表示されない問題

CSS の @media print メディアクエリを使用して、印刷時のスタイルを定義することはできます。しかし、背景色 (background-color) の場合、意図したとおりに表示されないことがあります。これは、いくつかの原因が考えられます。

原因

解決策

例

@media print {
  body {
    background-color: #fff; /* 背景色を白に設定 */
  }

  table {
    background-color: transparent; /* 表の背景色を透明に設定 */
  }

  td {
    background-color: #eee; /* セルの背景色を薄灰色に設定 */
  }
}

補足

print-color-adjust プロパティを使用して、印刷時の色の調整をさらに制御することもできます。
JavaScript を使用して、印刷前に背景色をプログラムで設定することもできます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>印刷用背景色</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>印刷用背景色</h1>
  <p>この文章は印刷時に背景色が付きます。</p>

  <table>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </table>
</body>
</html>

CSS

body {
  background-color: #f0f0f0; /* 通常の背景色 */
}

@media print {
  body {
    background-color: #fff; /* 印刷時の背景色 */
  }

  table {
    background-color: transparent; /* 表の背景色を透明に設定 */
  }

  td {
    background-color: #eee; /* セルの背景色を薄灰色に設定 */
  }
}

このコードでは、以下の設定を行います。

通常の表示では、ボディ要素に#f0f0f0の薄灰色の背景色を設定します。
@media print メディアクエリ内では、印刷時のみに以下の設定を適用します。
- ボディ要素の背景色を白 (#fff) に設定します。
- 表の背景色を透明 (transparent) に設定します。
- セルの背景色を薄灰色 (#eee) に設定します。

この例を参考に、必要に応じてスタイルを調整してください。

実際の印刷結果はそのプリンタや設定によって異なる場合があります。
より複雑なレイアウトやデザインの場合は、さらに多くの CSS ルールが必要になる場合があります。

CSS @media print で背景色が表示されない問題：その他の解決策

JavaScript を使用して、印刷前に動的に背景色を設定することができます。これは、特に複雑なページや、印刷時にのみ特定の要素に背景色を追加したい場合に役立ちます。

window.onload = function() {
  if (window.matchMedia('print').matches) {
    document.body.style.backgroundColor = '#fff'; // 印刷時の背景色を設定
  }
};

印刷専用の CSS ファイルを作成し、そこに @media print ルールを記述することができます。これにより、通常の CSS ファイルと印刷用 CSS ファイルを別々に管理することができます。

/* print.css */

@media print {
  body {
    background-color: #fff; /* 印刷時の背景色 */
  }

  table {
    background-color: transparent; /* 表の背景色を透明に設定 */
  }

  td {
    background-color: #eee; /* セルの背景色を薄灰色に設定 */
  }
}

この CSS ファイルを print.css のような名前で保存し、HTML ファイルの <head> セクション内で以下のように読み込みます。

<link rel="stylesheet" href="print.css" media="print">

ライブラリを使用する

print-css や css-print などのライブラリを使用して、@media print ルールを簡単に作成および管理することができます。これらのライブラリは、多くの場合、前述の JavaScript や印刷専用の CSS ファイルで説明されているような機能を提供します。

ベンダー接頭辞を使用する

一部の古いブラウザでは、@media print ルールが正しく動作しない場合があります。このような場合は、-webkit-print や -moz-print などのベンダー接頭辞を使用して、特定のブラウザをターゲットにすることができます。

@media print (-webkit-print) {
  body {
    background-color: #fff; /* 印刷時の背景色 (Webkit) */
  }
}

@media print (-moz-print) {
  body {
    background-color: #fff; /* 印刷時の背景色 (Mozilla) */
  }
}

注意事項