紙の上で「Web」を再現するな──印刷用メディアクエリとインライン要素の現場的解釈
フロントエンドの仕事をしていると、どうしても「画面上の美しさ」に執着しがちだ。しかし、ふとした瞬間に「これ、印刷したらどうなるんだろう？」という視点を持てたとき、そのエンジニアは一段上のレベルに到達する。
特に、Webサイトの「印刷用メディアクエリ（`@media print`）」は、単にインクを節約するためのものではない。デジタル情報を物理媒体へと落とし込む際の、情報の「翻訳」作業だ。今日は、特に軽視されがちなインライン要素の印刷時挙動と、現場で「おっ、分かってるね」と思われるための実装テクニックについて話そう。
なぜ印刷時に「URL」を表示させる必要があるのか
Webサイトを印刷するユーザーの多くは、ドキュメントの参照元を求めている。画面上では「こちら」というリンクテキストで済んでいても、紙の上ではそのリンクがどこを指しているのか分からない。
ブラウザの裏側では、`a`要素の`href`属性は単なるナビゲーションの目的地だが、印刷という文脈ではそれは「コンテンツの一部」に昇格する。これをスマートに解決するのが、CSSの`::after`疑似要素だ。
現場で即戦力となる実装例
まずは、多くのプロジェクトでそのまま使える汎用的なスニペットを見てほしい。
@media print {
/ リンクのURLをテキストの後に表示する /
a[href^=”http”]::after {
content: ” (” attr(href) “)”;
font-size: 0.8em;
color: #666;
}
/ 既にURLがテキストに含まれている場合は重複を避ける /
a[href^=”http”]:only-child::after,
a[href^=”mailto:”]::after {
content: “”; / mailtoやURL直書きのリンクは補完しない /
}
/ 印刷時に不要な装飾はリセットする /
a {
text-decoration: none !important;
color: #000 !important;
}
}
このコードのポイントは、`attr(href)`を使っている点だ。CSSだけでDOMの属性値を抽出して描画する。これを知っているだけで、JavaScriptでわざわざ印刷用DOMを構築する無駄な工数を大幅に削減できる。
インライン要素と「改ページ」の泥臭い戦い
`span`や`strong`、`em`といったインライン要素は、ブラウザのレンダリングエンジンにとって「フローレイアウトの一部」に過ぎない。しかし、印刷の文脈では、これらがページを跨いで分割されることが多々ある。
特に注意すべきは、`strong`や`em`で強調されたテキストの途中で改ページが発生し、強調の文脈が断ち切られてしまうケースだ。
`break-inside`プロパティを使いこなす
CSSの`break-inside: avoid;`は、インライン要素を含むボックスがページを跨ぐ際に、可能な限りその要素を一つのページに収めようとするプロパティだ。
@media print {
/ 強調箇所がページをまたいで分断されるのを防ぐ /
strong,
em,
code {
break-inside: avoid;
/ 物理的なインクの乗りを考慮して、可読性を優先する /
background: none !important;
border: none !important;
}
/ インラインコードの挙動を調整 /
code {
font-family: monospace;
padding: 2px 4px;
background-color: #f4f4f4 !important; / 印刷時に薄いグレーにする /
border: 1px solid #ccc !important;
}
}
ここで重要なのは、`background`や`border`の扱いだ。画面上ではリッチな装飾をしていても、印刷時に背景色が印刷されない設定になっているブラウザが多い（デフォルトで「背景のグラフィック」がオフになっている）。そのため、必要であれば`print-color-adjust: exact;`（旧`-webkit-print-color-adjust`）を指定して、CSSの指定を強制的に反映させるのがプロの判断だ。
`time`要素の「情報の完全性」を担保する
最後に、`time`要素についても触れておこう。`time`要素はSEOや機械可読性のために`datetime`属性を付与することが多いが、画面上では装飾された日付を表示していることがほとんどだ。
印刷メディアにおいては、`time`要素も`a`要素と同様の考え方をするべきだ。
@media print {
/ time要素のdatetime属性を補完して記録としての正確性を担保する /
time[datetime]::after {
content: ” (投稿日: ” attr(datetime) “)”;
font-size: 0.7em;
color: #999;
}
}
結びに：なぜ印刷までこだわるのか
「今の時代、ペーパーレスだろ」という声が聞こえてきそうだが、契約書、マニュアル、あるいは重要なレポート。Webの情報が物理的な紙に定着されるとき、その情報は「Webサイト」から「ドキュメント」へとその性質を変化させる。
そのとき、エンジニアとして「URLが切れている」「日付が不明瞭」「強調が分断されている」という状態を放置するのは、プロフェッショナルな態度とは言えない。
今回紹介したテクニックは、どれも小さなものだ。だが、こうした「細部への配慮」の積み重ねこそが、あなたが納品するプロダクトの信頼度を決定づける。さあ、今日書いているコードに、`@media print`ブロックを一つ追加することから始めてみてほしい。
コメント