Update!

CSS3: 印刷時の改ページ部分をコントロールする

Web ページを印刷した時、プリント用の CSS が定義されていて、出力結果が綺麗な場合、そのサイトで扱っているコンテンツに対する信用は向上します。
今回はそんなプリント・PDF 出力時に、改行する位置を指定する CSS プロパティについてメモしておきます。

目次

  • 印刷時の改ページ部分をコントロールする
  • まとめ

印刷時の改ページ部分をコントロールする

改ページの CSS プロパティ説明の前に、header 内で print 専用の CSS を読み込みたい場合のサンプルコードを記載しておきます。

print.css を読み込むためのサンプルコード

<link rel="stylesheet" type="text/css" media="print" href="print.css">

改ページに関する 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で共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents