Web ページを印刷した時、プリント用の CSS が定義されていて、出力結果が綺麗な場合、そのサイトで扱っているコンテンツに対する信用は向上します。
今回はそんなプリント・PDF 出力時に、改行する位置を指定する CSS プロパティについてメモしておきます。
INDEX
目次
- 印刷時の改ページ部分をコントロールする
- まとめ
印刷時の改ページ部分をコントロールする
改ページの CSS プロパティ説明の前に、header 内で print 専用の CSS を読み込みたい場合のサンプルコードを記載しておきます。
print.css を読み込むためのサンプルコード
[code] [/code]
改ページに関する CSS before 要素プロパティ
| プロパティ | 値 | 説明 |
|---|---|---|
| page-break-before | auto | 制御しない （初期値） |
| always | 直前で改ページさせる | |
| avoid | 直前の改ページを禁止する |
改ページに関する CSS after 要素プロパティ
| プロパティ | 値 | 説明 |
|---|---|---|
| page-break-after | auto | 制御しない （初期値） |
| always | 直後で改ページさせる | |
| avoid | 直後の改ページを禁止する |
まとめ
print.css もしくは @media print を使用し、HTML 要素に対し page-break-before もしくは page-break-after で改行位置を指定します。
プリント時のプレビューを確認しながら、区切りのいい位置で div や hr タグに対しこれらのスタイルを定義すれば、PDF 出力時にも適用されます。
普段は見過ごされてしまいがちな印刷時のスタイルを定義しておけば、Web コンテンツ自体の品質・信用の向上につながると思いますので、積極的に導入してみてください。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
