【CSS】@media printで指定した印刷用CSSが効かない

【CSS】@media printで指定した印刷用CSSが効かない

Webページを印刷する際のレイアウトを指定するとき、「@media print」を使用することが多いかと思います。

しかし、「@media print」で指定したCSSが印刷時に反映されていないということがあったのでメモです。

こんな感じのイメージです。

<style>
/* 印刷用 */
@media print {
  .txtWrapper {
    background-color: red;
  }
}

/* 画面表示用 */
.txtWrapper {
  background-color: red;
}
</style>

<div class="txtWrapper">
  <span>テキスト</span>
</div>

原因は、印刷用のCSSが上に記述されていることでした。

「@media print」を記述した際は、そのCSSが必ず指定されるわけではないようです。

印刷の際にそのCSSが有効になるだけで、普通のCSSなのです。

恐らく、印刷の際はこういう状態になっているわけです。

<style>
/* 印刷用 */
.txtWrapper {
  background-color: red;
}

/* 画面表示用 */
.txtWrapper {
  background-color: red;
}
</style>

<div class="txtWrapper">
  <span>テキスト</span>
</div>

CSSは同じセレクタの場合は下に記述されているもので上書きされるため、印刷用のものが反映されなかったということですね。

つまり、印刷用のCSSを下に記述することで解決できるわけです。

<style>
/* 画面表示用 */
.txtWrapper {
  background-color: red;
}
/* 印刷用 */
@media print {
  .txtWrapper {
    background-color: red;
  }
}
</style>

<div class="txtWrapper">
  <span>テキスト</span>
</div>

ちなみに、印刷用のCSSを下に記述した場合でも、セレクタの優先度などが原因で反映されない場合もあります。

こういう状態ですね。

<style>
/* 画面表示用 */
#txtWrapper {
  background-color: red;
}
/* 印刷用 */
@media print {
  .txtWrapper {
    background-color: red;
  }
}
</style>

<div id="txtWrapper" class="txtWrapper">
  <span>テキスト</span>
</div>

気をつけて作っていきます。