CSSで印刷対応を行う

コーディングで印刷を想定した対応を行うことがあったので、その際に調べた内容をメモ。

印刷用設定の読み込み

印刷時の表示確認用にダミーページを用意します。

  <header class="header">
    ヘッダー
    <button onclick="window.print();">印刷</button>
  </header>
  <main class="main">
    <h1>見出し1</h1>
    <section class="section">
      <h2>見出し2-1</h2>
      <p>君はほかやはりその話めというのの時をもっなかっまし。単に今日を仕事らはどうしても同じ約束なくありともをやって致しでにも命令認めませたて、ちょっとにも見るたなですた。資格に踏みたのは何でもかでも半分の現にんなかっなくっ。</p>
      〜 略 〜
    </section>
    〜 略 〜
    <section class="section">
      <h2>見出し2-10</h2>
      <p>こういう事た、危険たあいつは力のただにすれ説明入ったなどという遅まき久原個性はわざわざよろしゅうなが取次いなけれ、教育式を描いまし道に眺めるだ上、とやかく非常人格のものをうろつい旨にするましまし。しかし相違めとしてないしいようで雨はあれに火事をいているだものでし、何はせっかく仕儀に考えですう。大森さんは私は少々安泰行くから云っと出なまでなくて、だからよほど矛盾にぶつかってくるがも偉いない方くらい延ばすたず。それにそうあるとは私のはご大森たい以上ないとは落ちがらありたなです。必竟を面白かろ上るな留学でするて、事実の私もむくむく間接家を文芸院を一間をいでしょようですものたざる。十年のうちこれはどうしても世間の礼式を返事しましな。</p>
      〜 略 〜
    </section>
  </main>

印刷用のCSSは@media print で設定を行います。

@media print {
	.header {
		display: none;
	}
}

これで印刷のプレビューを確認すると、ヘッダーが非表示になりました。
印刷設定のデモページ

他の方法として、印刷用のCSSファイルを別途作成して読み込む方法などもあります。

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

print.css

.header {
	display: none;
}

印刷設定のデモページ2

改ページ

次に改ページを制御する方法を試してみます。

特定の要素の前で改ページの制御を行いたい場合、break-beforeを使用します。
例として、.sectionの前で改ページを行うようにしてみます。

@media print {
	.header {
		display: none;
	}
	.section {
		break-before: page;
	}
}

印刷プレビューを確認すると、.section毎にページが分かれるようになりました。
改ページ設定のデモページ

特定の要素の後で改ページの制御を行いたい場合、break-afterを使用します。
例として、.sectionの後で改ページを行うようにしてみます。

@media print {
	.header {
		display: none;
	}
	.section {
		break-after: page;
	}
}

結果としては前のデモと近いですが、.sectionの後で改ページとしているため、1ページ目に1つ目の.sectionが含まれるようになっています。
改ページ設定のデモページ2

特定の要素の途中で改ページの制御を行いたい場合、break-insideを使用します。
例として、.sectionの途中で改ページされないようにしてみます。

@media print {
	.header {
		display: none;
	}
	.section {
		break-inside: avoid;
	}
}

これで.sectionの途中で改ページされないようになりました。
改ページ設定のデモページ3