改ページする CSSの「page-break」が効かない件

WEBページを印刷する時の改ページ位置の指定は、CSSの page-break-before や page-break-afterを使って指定できる。ただ、Chromeだと、HTMLの作りによって改ページされないケースがあり、私自身もハマった。

この記事では、page-break で改ページされないケースと、対処方法について紹介する。

float、flexを使うと改ページされない

まずは、page-break で改ページされない原因だ。

Chromeだとfloat、flex を使ったWEBページの場合、正しく改ページされない。詳細な原因は不明であるが、float、flex はコンテンツを横に並べて配置するための CSS属性であるため、縦方向の改ページが Chromeでは認識されないのではないかと思う。

対処

float、flex を使わないレイアウトにするしかない。

メディアクエリなどを使って、印刷時のみ適用するCSSを書いても良い。

@media print{
/** 印刷時のみ適用するCSS */

}