• HOME > 
  • CSS > 
  • 背景が印刷できないときにCSSで指定する方法【初心者にもわか...

背景が印刷できないときにCSSで指定する方法【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ページ内で背景だけが印刷されない原因

ページを印刷したときに、背景色や背景画像が印刷されない場合があります。

実はブラウザの印刷設定には、「背景のグラフィック」を印刷するか選択する項目が存在し、これが無効化されているとbackgroundプロパティのスタイルが印刷されなくなってしまいます。

背景とは、CSSのbackgroundプロパティに指定したスタイルを指します。

imgタグではなく、backgroundプロパティを利用して画像を表示している部分も該当します。

例えば以下のように制作したページがあるとします。

CSS

.sample .header{
  background:#999;
  border:solid 3px #666;
  padding:10px;
  margin:30px 0;
  color:#00f;
  font-weight:bold;
}
.sample .footer{
  background:#c9c9c9;
  border:solid 3px #b9b9b9;
  padding:10px;
  margin:30px 0;
  color:#f00;
  font-weight:bold;
}
.sample th,.sample td{
  width:50%;
  height:100px;
  padding:10px;
  vertical-align:middle;
}
.sample th{
  background:url(forest.jpg)center no-repeat;
}

HTML

<div class="sample">
  <div class="header">サイトタイトル</div>
  <table><tr>
  <th>テスト</th><td>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</td>
  </tr></table>
  <div class="footer">フッター</div>
</div><!--end sample-->

ブラウザでは下図のように表示されているのに、

ブラウザでの表示例

印刷してみると下図のように印刷されてしまう場合があります。

背景が印刷されない例

ブラウザの印刷設定を確認する

backgroundプロパティまで印刷するには、ブラウザの印刷設定を変更します。

Google Chromeの場合

印刷プレビューの画面から、「詳細設定」の中にある「背景のグラフィック」にチェックを入れます。

Chromeの場合

Microsoft Edgeの場合

印刷プレビューの画面から、「その他の設定」の中にある「背景のグラフィックス」にチェックを入れます。

Edgeの場合

Internet Explorerの場合

印刷プレビューの画面から上部の設定ボタンをクリックし、開いた「ページ設定」ウインドウの「用紙オプション」にある「背景の色とイメージを印刷する」にチェックを入れます。

IEの場合

CSSで制御する方法

自身で印刷する際は前述の内容を理解していれば問題ありませんが、サイトを訪れ、印刷しようとしたユーザーが皆理解している訳ではありません。

せっかく制作したサイトが不完全に印刷されてしまうだけでなく、サイト側に問題があるから印刷できないのだと考えるユーザーもいるかもしれません。

CSSには印刷時に必ず背景まで印刷されるように強制するプロパティが存在します。

前述のような問題を未然に防ぐためにもCSSであらかじめ指定しておきましょう。

-webkit-print-color-adjustプロパティ

CSS

@media print{
 *{
     -webkit-print-color-adjust: exact;
 }
}

記述の説明

印刷するときだけ必要になりますので、メディアクエリ(@media print)の中に記述しています。

セレクタ「*」は全ての要素を指します。このように指定することで、backgroundとセットで何度も記述する必要はなくなります。

なお、 -webkit-print-color-adjustは、Google ChromeとMicrosoft Edge限定で使用できるプロパティです。

リンク先のサムネイル
CSSのベンダープレフィックスとは?【初心者にもわかりやすく解説】

ベンダープレフィックスをプロパティの接頭辞として付与して記述することで、各ブラウザのベンダー(開発元)が開発した拡張機能のCSSを先行実装できるようになります。べンダープレフィックスにはブラウザごとの接頭辞が存在します。使用する時はプロパティ名の前にハイフォンをつけて記述します。  ...【もっと読む】

残念ながらInternet Explorerでは、非対応となっていますので、前述のようにブラウザの印刷設定で背景も印刷するようにチェックを入れる必要があります。

まとめ

サイト制作においては印刷した際の状態の確認は見落としがちです。簡単に対応できますので、あらかじめ記述しておいた方が良いかもしれません。

関連する記事

サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。
サムネイル

CSSのclamp()・max()・min()の使い方【プロ……

2023年01月16日
最終更新日:2023年03月10日
clamp()・max()・min()はCSSのプロパティの値の指定に利用できる比較関数です。複数の値を比較し1つの値を導きだし上限や下限を設定できます。
サムネイル

CSSのfont-feature-settingsの使い方【……

2023年01月16日
最終更新日:2023年03月10日
font-feature-settingsは、文字本来のサイズに応じてフォントの文字詰め(カーニング)を設定するためのプロパティです。
サムネイル

CSSのletter-spacingで文字間隔を設定【中央寄……

2023年01月16日
最終更新日:2023年03月10日
letter-spacingは、テキストの文字と文字との間隔を設定するためのプロパティです。文字と文字の間を狭めたり、広げたりしてバランスを整えることができます。
サムネイル

CSSのtext-emphasisの使い方【圏点(けんてん)……

2023年01月16日
最終更新日:2023年03月10日
text-emphasisは、文字を強調したいときに付け加える圏点(けんてん)を表示するプロパティです。圏点のスタイル(形状)と色を自由に設定することが可能です。
サムネイル

CSSで中国語フォントを表示させる方法【font-famil……

2022年10月28日
最終更新日:2023年03月10日
簡体字を使用するにはサイトにGoogle FontsなどのWebフォントを導入して、CSSのfont-familyプロパティでそのフォントを指定します。