しろうさぎのwebnotebook

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

しろうさぎのwebnotebook

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; }