CSSで印刷時にある要素の途中で改ページされないようにする

2021.03.09.火
技術

記憶にないぐらい久々に記事を書いているHIGAです。これからは軽いネタをバンバン出すスタイルでいこうと思いますので、今回の記事も軽い内容となります。

最近CSSで印刷レイアウトを調整していたとき、改ページを制御する、具体的にはある要素の途中で改ページされるのを防ぐ方法はないかと思い調べてみました。

結果、CSSプロパティで制御できることが分かりました。

CSSプロパティの概要


break-before
break-inside
break-after

それぞれ、生成されたボックスの(前|途中|後)で、ページ、段、領域をどのように区切るかを設定するプロパティです。

画面表示にも印刷レイアウト(ページメディア)にも有効なプロパティです。
設定するキーワードにより強制的に改ページさせたり、させなかったり色々と設定できます。

改ページを禁止する方法


今回は前述の通り、印刷時にある要素の途中で改ページを禁止する方法について記載します。
例として、P要素で構成されたページがあるとします。



CSSには印刷時にのみ適用されるようメディアクエリを記載し、P要素にbreak-inside:avoidを設定します。avoidは、該当するボックスの直後に何らかの (ページ、段、領域の) 区切りを挿入することを禁止するキーワードです。


結果


分かりやすいようにボーダーなど調整していますが、以下のように印刷レイアウトが自動調整されます。今回はP要素の途中で改行されないようにしたため、改行される位置にあったP要素が次のページに移動しています。


あとがき


今後も活用の機会がありそうなので忘備録も兼ねて本記事を作成しました。
今後もこのぐらいのノリで投稿できるよう頑張ります。

-->
HIGA

HIGA の紹介

趣味はアニメとゲーム あとピアノとバドミントンと卓球 一番好きなアニメは「カウボーイビバップ」 一番好きなゲームは「ゼルダの伝説 時のオカリナ」 一番好きな作曲家は「久石譲」 卓球のラケットはペン派です