印刷用スタイルシート: ウェブページを紙とPDFで使えるものにする

目的

印刷したときやPDFとして保存したときに、コンテンツだけが含まれていて余計なものがなく、文字が読みやすく、表が崩れず、リンクのターゲットが見え、ページの区切りも適切な位置にあるページ。

前提条件

セマンティックなマークアップ(印刷用ルールはnav、header、footer、aside、mainを対象にする)、テスト用のブラウザ印刷プレビュー、そしてMDNの印刷ガイドが説明している仕組みについての知識: 印刷専用ルールのための@media print、ページの寸法・向き・余白のための@pageアットルール、印刷リクエストの前後でドキュメントを調整するためのbeforeprint/afterprintイベント、ダイアログを起動するwindow.print()。

手順

1. スタイルシートの末尾に@media printブロックを追加する(詳細度は依然として適用される)。まわりの装飾を隠す: nav, header, footer, aside, .toolbar, button { display: none }。fixedやstickyの位置指定は、そのままだとページごとに繰り返し表示されてしまうため削除する。
2. ページをリセットする: 背景を白に、文字を黒に、フォントは明朝体か紙面向けのサイズを指定した本文フォントにし、コンテンツ列にはmax-width: noneを指定してページ幅いっぱいに使わせる。
3. 画面上では隠れているものを展開する: details要素を開き、すべてのタブパネルやアコーディオンの中身を表示し、省略されたテキストは全文を印字する。CSSが届かない箇所(表示中の行だけを描画する仮想化リストなど)にはbeforeprintイベントを使う。
4. リンクのターゲットを表示する: a[href^="http"]::after { content: " (" attr(href) ")" }とし、内部アンカーやリンクテキストがすでにURLそのものであるものは除外する。意味があるならabbrのtitleも同じ方法で表示する。
5. 改ページを制御する: 表・図・コードブロック・カード状のまとまりにはbreak-inside: avoid、見出しがページ下端で孤立しないようbreak-after: avoid、必要に応じて大きなセクションの前にはbreak-before: pageを指定する。theadはデフォルトのdisplay: table-header-groupのままにしておく(上書きしない)。印刷エンジンは、表が複数ページにまたがる場合にヘッダー行を各ページで繰り返すことがあるためである。
6. @page { size: A4; margin: 2cm }(またはletter)を設定し、1ページ目だけ余白を変えたい場合は@page :firstも検討する。
7. 色について: ブラウザは印刷時に背景色や画像を省略するのが一般的である。背景に意味がある箇所(ステータスを示すチップ、シンタックスハイライトなど)では、その要素だけにprint-color-adjust: exactを指定し、それ以外の箇所には代わりに枠線やテキストラベルを付ける。
8. 2つのブラウザで、縦向き・横向きの両方、さらに「PDFとして保存」でも印刷プレビューをテストする。ページ数を確認し、広すぎるセレクタによって重要な要素が隠されていないかを確認する。

期待される結果

印刷すると、ナビゲーションのないコンパクトなドキュメントにすべてのコンテンツが収まり、コードや表は読みやすく、URLは紙面から読者が手入力できる状態になる。

限界と検証の根拠

挙動は引用したMDNのドキュメントに従うが、改ページのサポートや@pageの機能はエンジンによって異なり、ヘッドレスのPDF生成ツールにはそれぞれ独自のデフォルト設定がある。インタラクティブなコンテンツ(地図やcanvasで描かれたチャート)には、別途用意した静的な代替画像が必要になる。

サイトの外枠を隠す、すべてのheaderではなく

header、footer、asideはそれぞれ直近のセクションにスコープされるため、header { display: none }とだけ書くと、記事のタイトルブロックやセクションの脚注、引用の出典まで消えてしまう。ページ全体の外枠は、位置やクラスで狙い撃ちする:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

状態を示すボタン(押下済みのトグル、選択中のタブ)は残し、印字しても意味を持たないコントロールだけを隠す。そのうえで手順8を、問いを逆にして実行する。つまり印刷ビューに含まれているべきものをリストアップし、それぞれが実際に存在することを確認するのであって、欠けているものを探すのではない。