【CSS】印刷用のレイアウト

【CSS】印刷用のレイアウト

CSSでレイアウトを行っているページで、印刷時のレイアウトを指定されることがありますね。

そんな時は、CSSを「@media print」で囲うことで実現できるようです。

こんな感じです。

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

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

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

このように記述することで、画面表示の際は赤、印刷時は黄色の背景になります。

また、CSSファイルを読み込む際に指定することもできるようです。

<link rel="stylesheet" href="layout.css" type="text/css" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

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

layout.cssが画面表示用で、print.cssが印刷用と考えてください。

「media=”print”」を指定していることが分かるかと思います。

これで簡単に印刷用レイアウトを作ることができますね。