Webページを印刷しようとすると、ユーザーが設定した印刷設定に従ってページの大きさや余白が調整されたり、背景色や背景画像が表示されない、用途の途中で平然と改ページすることにより意図しない表示になったWebページを出力してしまうことがある。

そこで印刷用に用意されたCSSの機能を利用すると、Webページを印刷する際の見た目を調整することができる。

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

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

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

@media print {
  @page {
    size: A4;
    margin: 0px;
  }
  .no-print {
    display: none;
  }
  section,
  pre {
    break-inside: avoid;
  }
  pre {
    -webkit-print-color-adjust: exact;
  }
}

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

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

@page {
  size: A4 landscape;
  margin: 0px;
}

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

sizeプロパティ

A4やletterなどキーワードまたはwidth heightの形式で寸法を、portraitまたはlandscapeで向きを指定することができる。

https://developer.mozilla.org/ja/docs/Web/CSS/@page/size

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

width heightの形式の場合、任意のCSS単位を利用することが出来るが、基本的にmmやcm、inなど単位を利用することが推奨されている。 また、vwやvhなどビューポートに関する単位は扱いが決まっておらず利用しないように注意がされている。

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

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

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

section {
  break-inside: avoid;
}

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

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

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

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

/* h2要素の前で改ページする */
h2 {
  break-before: page;
}
/* footer要素の後で改ページする */
footer {
  break-after: page;
}

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

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

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

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

pre {
  -webkit-print-color-adjust: exact;
}