印刷範囲をスタイルシートで指定する

webページを印刷するとき、
メイン部分のみ印刷したいのに、
ヘッダー、フッター、サイドバーも印刷されてしまう。


そんなときはスタイルシートで、
印刷する範囲に含める、含めないの指定をします。


スタイルシートで印刷範囲を指定するタグは、


head
main side
foot


@media print{
#head{display:none;}
#foot{display:none;}
#side{display:none;}
#main{width:100%; float:none;}
} 

印刷時の改ページ部分を制御するプロパティ

  • page-break-before … 要素の直前の改ページを制御
  • page-break-after … 要素の直後の改ページを制御


プロパティ名 説明
page-break-before
(直前)
auto 制御しない (初期値)
always 直前で改ページさせる
avoid 直前の改ページを禁止する
page-break-after
(直後)
auto 制御しない (初期値)
always 直後で改ページさせる
avoid 直後の改ページを禁止する

 指定例

見出し(h2要素)の直前で改ページさせる例
h2 { page-break-before: always; }
水平線(hr要素)で区切って改ページさせる例
hr { page-break-after: always; }