画面の「見たまま」を印刷するな。リスト要素で学ぶ、プロの印刷用CSS設計
Webサイト制作の現場で、意外と見落とされがちなのが「印刷用スタイル（`@media print`）」の最適化です。
「印刷なんて今どき……」と思うかもしれない。しかし、業務システムや契約書、あるいは丁寧な構成の記事であれば、ユーザーはブラウザの印刷機能を使ってPDF化したり、紙に落としたりする。その際、画面で見ているリッチなUIが、印刷した途端に無残なレイアウト崩れを起こしていたら？ それは、フロントエンドのプロとして「仕事が雑だ」と思われても仕方ないポイントです。
特に、`ul`や`ol`、`dl`といったリスト系要素は、印刷時に「マーカーが邪魔」「途中でブチッと改行される」「インデントが深すぎて紙面の無駄」といったトラブルの温床になりやすい。今回は、現場で即戦力となるリスト要素の印刷最適化テクニックを解説します。
—
1. ブラウザが「リスト」を印刷するとき何が起きているか
ブラウザのレンダリングエンジンは、デフォルトでリスト要素に `list-style-type` や `padding-left` を付与し、視覚的な階層を作ります。しかし、印刷メディアではこれらが「紙の余白」と干渉し、無駄な空白を生んだり、箇条書きのマーカーが右端に追いやられたりすることがあります。
最も頭を悩ませるのが、「リストの途中で改ページが発生し、項目が分断される」という現象です。これを防がない限り、読み手は前後の文脈を見失い、ドキュメントとしての信頼性は地に落ちます。
—
2. 現場で使える「印刷最適化」のベストプラクティス
ここでは、可読性を最大化するための具体的なCSS設計を紹介します。このままスタイルシートの末尾にコピペして調整してみてください。
@media print {
/ リスト要素全体に適用するリセット /
ul, ol, dl {
/ 印刷時の無駄なインデントを詰める /
padding-left: 1.5rem !important;
margin: 0.5rem 0;
}
/ 箇条書きマーカーを制御 /
ul li, ol li {
/ リスト項目がページを跨いで分断されるのを防ぐ /
/ これが最も重要。項目をひと塊として扱う /
break-inside: avoid;
/ 項目間の余白を適度に確保 /
margin-bottom: 0.25rem;
}
/ 記述リスト(dl)の制御 /
dl {
margin-bottom: 1rem;
}
dt {
font-weight: bold;
margin-top: 0.5rem;
break-after: avoid; / 見出しと本文を引き離さない /
}
dd {
margin-left: 1rem;
break-inside: avoid;
}
/ 印刷時に不要なマーカーを消したい場合 /
/ .no-marker-print { list-style: none; padding-left: 0; } /
}
—
3. なぜ `break-inside: avoid` が重要なのか
かつてのCSSでは `page-break-inside: avoid;` と書いていましたが、現代の標準は `break-inside: avoid;` です。
このプロパティを `li` に当てるだけで、ブラウザは「可能であれば、この要素は改ページを挟まずにひとつのページに収めろ」という命令を解釈します。もし要素が大きすぎてページに収まらない場合は、潔く次のページへ先送りされます。
プロの視点：
ここで一つ泥臭い知見を。`break-inside: avoid` を過信してはいけません。リストのアイテム自体がA4用紙の半分以上の高さを持つような巨大なコンポーネントである場合、ブラウザは「どうしても収まらない」と判断して強制的に分割します。リストは「短く、簡潔な情報の塊」にするという構造そのものの工夫が、CSSのテクニック以上に重要であることは忘れないでください。
—
4. さらに一歩先へ：印刷用UIの「気遣い」
実務で評価されるエンジニアは、CSSだけでなく「情報の届け方」を考えます。
- マーカーは必要か？: 印刷物では、数字を振った `ol` は親切ですが、単純な `ul` のマーカーはインクの無駄であり、紙面のノイズになることが多い。あえて `list-style: none;` にして、視覚的にスッキリさせるのも一つの解です。
- リンクのURLを明示する: Webではクリック可能なリンクも、紙ではただのテキストです。CSSで `a::after { content: ” (” attr(href) “)”; }` のようにURLを追記するテクニックをリストに組み合わせると、ドキュメントの価値が格段に上がります。
まとめ
印刷用CSSは、単なる「おまけ」ではありません。それは、あなたの作ったWebサイトが「画面の外」でも正しく機能することを証明する、プロフェッショナルとしての誇りです。
「画面では完璧、印刷しても完璧」。この両立ができて初めて、自信を持ってコードをデプロイできるというもの。ぜひ、次のプロジェクトでは、このリストの制御から印刷スタイルの見直しを始めてみてください。あなたのチームのドキュメントの質が、必ず一段階引き上がります。
コメント