こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。
Web制作を始めたばかりの頃って、画面を作る（スクリーン用のCSSを書く）だけでも精一杯なのに、「印刷用も綺麗に整えてね」なんて言われると、「えっ、まだやることがあるの……？」と、思わず遠い目をしてしまいますよね。大丈夫ですよ、安心してください。今日のこの記事を読み終える頃には、「印刷って、実はブラウザの心臓部にとってこういうドラマだったんだ！」と、ちょっと楽しくなっているはずです。
今回は、普段私たちが何気なく使っている「紙への印刷（@media print）」が、Webブラウザの内部でどうやって料理されているのか、その舞台裏をこっそり覗いてみましょう。
—
1. そもそも、ブラウザにとって「画面」と「紙」は何が違うの？
まず、身近な例えでお話ししますね。
私たちが普段見ているPCやスマホの画面は、いわば「終わりなきスクロールの世界（無限に続く巻き物）」です。情報が長ければ、下へ下へとスクロールして読んでもらえばいい。
一方、「印刷（紙）」はどうでしょう？ 紙のサイズ（A4とかB4とか）は有限ですし、ハサミで切ったようにパツンパツンとページが区切られていますよね。つまり、「限られた長方形のキャンバスを、何枚も並べるパズルゲーム」なんです。
Webブラウザは非常に優秀ですが、画面用のデザインをそのまま紙に印刷しようとすると、パニックを起こします。
「あれ？ サイドバーのメニューや、ピカピカ光るバナー広告も一緒に印刷しちゃうの？ 紙なのに？」って。そこで登場するのが、`@media print` という、ブラウザへの「印刷専用の指示書」なんです。
—
2. ブラウザの裏側：HTMLが紙に生まれ変わるまでの秘密のプロセス
私たちが「印刷ボタン」を押した瞬間、ブラウザのレンダリングエンジン（HTMLを解釈して画面を描画する仕組み）の中では、次のような大急ぎのドラマが繰り広げられています。
1. お片付けタイム（メディアクエリの切り替え）
ブラウザは「おっ、印刷だな？」と気づくと、画面用のCSS（`screen`）をいったん脇に置き、印刷用のCSS（`print`）を読み込みます。ここで「いらない広告は消す！ メインの文章だけ残す！」という大掃除が行われます。
2. パズルピースの再構築（DOM / CSSOMの変形）
紙に合わせるために、文字の大きさを微調整したり、背景の色をインク節約のために白黒っぽく変えたりします。
3. 運命の分水嶺：ページ分割（Pagination）
ここが一番の山場です。無限に続くはずだったレイアウトを、「ここでA4の紙が切れるよ！」というラインで強制的にチョキチョキと切り分けていく作業（ページネーション）が始まります。
この仕組みを知ると、「ブラウザって、裏でこんなに健気にパズルを解いてくれていたんだ……」となんだか愛おしくなってきませんか？
—
3. 怖くない！ `@media print` の基本的な書き方
百聞は一見に如かず。実際にどんな風に書くのか、シンプルなコードを見てみましょう。
エディタにそのまま貼り付けて、ブラウザの「印刷プレビュー」で試せるようにコメントもたっぷり入れておきました。
これをブラウザで開いて、キーボードの `Ctrl + P`（Macなら `Cmd + P`）を押してみてください。「印刷プレビュー」画面が開きますよね。
サイドバーが綺麗に消えて、メインの記事だけがスッキリと紙のレイアウトに収まっているのが確認できるはずです。
—
4. 紙ならではの悩みを解決する魔法：「@pageルール」と「ページ分割」
さて、ここからが少しだけ実務的なプロのテクニックです。
画面には「余白」の概念がスクロールによって曖昧ですが、紙には「物理的な端っこ（フチ）」があります。
余白や用紙サイズの指定 (`@page`)
CSSの `@page` ルールを使うと、印刷する紙そのもののサイズや余白をコントロールできます。
@media print {
@page {
size: A4 portrait; / A4サイズで縦向き（portrait）に指定 /
margin: 20mm; / 紙のフチから20mmの余白を絶対死守する /
}
}
「途中で文章が真っ二つに！」を防ぐお作法
ブラウザが自動でページを分割してくれるのはありがたいのですが、たまに「見出しと、その次の段落の間に、ちょうど紙の切れ目がきちゃった……！」という悲しい事故が起きます。これ、せっかくの綺麗なデザインが台無しになってしまいますよね。
そんなときは、以下のCSSプロパティをブラウザに教えてあげましょう。
- `page-break-inside: avoid;` または `break-inside: avoid;`
- 「このボックス（表や画像、カードなど）の途中で、絶対にページを真っ二つに割らないでね！」という強いお願いです。
- `page-break-before: always;` または `break-before: page;`
- 「ここから先は、絶対次のページに押し出して（改ページして）ね！」という指示です。
@media print {
/ 表（テーブル）の途中で行がちぎれてページを跨がないようにする /
table {
break-inside: avoid;
}
/ 章の区切り（大見出し）の前では、必ず新しいページにスパッと切り替える /
h2 {
break-before: page;
}
}
これらを適切に設定してあげるだけで、印刷物のクオリティがプロの仕上がりにグッと近づきます。
—
さいごに
Webブラウザの印刷用レンダリング（`@media print` やページ分割）は、最初は難しく感じるかもしれませんが、要するに「紙という限られた制約の中で、ブラウザに上手にレイアウトのお手伝いをお願いする仕組み」です。
完璧にすべてのブラウザでピクセル単位を一致させるのは今でも少し骨が折れる作業ですが、基本の考え方さえ分かってしまえば怖くありません。まずは身近なページで、不要な要素を `display: none;` で消すところから、気負わずに試してみてくださいね。
あなたのWeb制作ライフが、もっと楽しく、もっと自由になりますように！
コメント