894文字
4分
編集

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

#CSS

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

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

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

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

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

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

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

css
@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

css
@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

css
section {
  break-inside: avoid;
}

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

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

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

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

css
/* 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

css
pre {
  -webkit-print-color-adjust: exact;
}
編集