CSSで印刷時の見た目を調整する

印刷用のスタイルを指定する @media print#

@media printを利用すると、印刷時にのみ適用されるスタイルを指定することができる。

印刷（未調整） 印刷（調整済）

1
@media print {
2
  @page {
3
    size: A4;
4
    margin: 0px;
5
  }
6
  .no-print {
7
    display: none;
8
  }
9
  section,
10
  pre {
11
    break-inside: avoid;
12
  }
13
  pre {
14
    -webkit-print-color-adjust: exact;
15
  }
16
}

印刷時の大きさや余白を指定する @page#

@pageを利用すると、印刷時のページの大きさや余白を指定することができる。

1
@page {
2
  size: A4 landscape;
3
  margin: 0px;
4
}

このアットルールは非常に特殊であり、印刷の寸法や向きを指定できるsizeプロパティが利用できるが、size や margin など限られたプロパティ以外は無視される。

1
@page {
2
  size: 4in 6in portrait; /* 4インチ x 6インチの縦向き */
3
  size: A4 landscape; /* A4用紙の横向き */
4
}

要素の途中で改行させない break-inside#

break-insideプロパティを利用すると、要素の途中で改行させないようにすることができる。 以前はpage-break-insideプロパティという名前であった。現在page-break-insideはbreak-insideのエイリアスになっている。

https://developer.mozilla.org/ja/docs/Web/CSS/break-inside

1
section {
2
  break-inside: avoid;
3
}

段区切りや、改ページどちらかのみを避けたい場合は、avoid-columnやavoid-pageを利用することができる。

要素の前後で改ページさせる break-before, break-after#

before-breakを利用すると、要素の前後で改ページさせたり、改ページを避けたりすることができる。

https://developer.mozilla.org/ja/docs/Web/CSS/break-before

1
/* h2要素の前で改ページする */
2
h2 {
3
  break-before: page;
4
}
5
/* footer要素の後で改ページする */
6
footer {
7
  break-after: page;
8
}

改ページを避ける場合は、avoidやavoid-pageを利用することができる。

印刷時に背景色や背景画像を表示する print-color-adjust#

特に何も指定しない場合、印刷時には背景色や背景画像、文字色などをブラウザが調整する。 print-color-adjustプロパティを利用すると、背景色や背景画像を表示することができる。 ただし、ほとんどの環境で-webkit-プレフィックスが必要である。

https://developer.mozilla.org/ja/docs/Web/CSS/print-color-adjust

1
pre {
2
  -webkit-print-color-adjust: exact;
3
}