こんにちは！Web制作の世界へようこそ。
HTMLとCSSを学び始めると、どうしても「ブラウザでどう見えるか」ばかりを気にしがちですよね。でも、プロの現場では「紙に印刷されたとき」の美しさまで気配りできるかどうかが、一人前かどうかの分かれ道だったりします。
今日は、Webサイトを「紙」に出力するときに、テキストをグッと読みやすくする魔法のテクニックをお話しします。難しいことはありません。一緒に「おもてなしの心」をコードに込めてみましょう。
—
なぜ「印刷」のためのCSSが必要なの？
皆さんは、Webサイトの「印刷ボタン」を押して、文字が小さすぎたり、見出しの途中でページがブチッと切れてしまってガッカリした経験はありませんか？
Webの世界は「画面」が主役ですが、領収書や資料としてPDF化したり、実際にプリントアウトするシーンは意外と多いものです。そんなとき、「画面用の服（CSS）」とは別に、「紙用の服」を着せてあげるのが、一流のフロントエンド・エンジニアの嗜みです。
—
魔法の合言葉：@media print
CSSには、特定の環境だけ呼び出せる「条件分岐」のような機能があります。それが `@media print` です。これをCSSファイルの最後に書き加えるだけで、印刷時だけの「別世界」を作れるんです。
/ 普段の画面用のスタイル /
body {
font-size: 16px;
color: #333;
}
/ ここから下が「印刷するとき」だけのルールです /
@media print {
/ 印刷時は少し大きな文字にして、インクを節約するために黒文字にしたりします /
body {
font-size: 12pt; / 紙ではpxよりptが好まれます /
color: #000;
}
}
—
見出しがページをまたいで泣き別れ？「改ページ」を制御しよう
一番悲しいのが、見出し（h1〜h6）だけがページの最後にポツンと残って、次のページに内容が移動してしまうこと。これ、読んでいる人はすごくストレスですよね。
そんなときは `break-inside: avoid;` というプロパティを使います。「ここで改ページしないで！」とブラウザに優しくお願いする魔法の言葉です。
@media print {
h1, h2, h3 {
/ 見出しと、その下の段落がバラバラにならないようにする設定です /
break-inside: avoid;
/ 見出しの直後に改ページが入るのを防ぎます /
break-after: avoid;
}
p {
/ 段落の途中で無理やりページが切れるのを防ぎます /
break-inside: avoid;
}
}
「お買い物リスト」を印刷するとき、品名と個数がバラバラに離れていたら困りますよね？ それをひとまとめにしてあげる感覚です。
—
読みやすさを左右する「フォントサイズ」の微調整
PCモニターは「光」で文字を見ますが、紙は「反射」で見ます。画面では心地よい16pxの文字も、紙に印刷すると少し小さく感じることがあります。
印刷用には、少しだけ大きめのサイズを指定したり、行間（line-height）を少し広げると、驚くほど読みやすくなりますよ。
@media print {
p {
font-size: 12pt; / 画面より少ししっかりしたサイズ感に /
line-height: 1.6; / 行間に余裕を持たせると、目が疲れにくいです /
margin-bottom: 1em; / 段落同士の距離も少しゆったりと /
}
}
—
最後に：完璧を目指さなくて大丈夫！
「印刷のレイアウトを1ピクセル単位で完璧に合わせなきゃ…」とプレッシャーに感じる必要はありません。まずは、「見出しと文章がバラバラにならないようにする」ことと、「文字サイズを読みやすくする」こと。この2つだけでも、あなたのWebサイトの品格はグッと上がります。
Web制作は、誰かのために情報を届ける優しいお仕事です。「印刷する人がいたら、どんな風に見えるかな？」と想像するだけで、あなたの書くコードはもっと温かくなるはずです。
もしうまくいかなくても、大丈夫。ブラウザの「印刷プレビュー」を何度もポチポチしながら、少しずつ調整していけばいいんです。その試行錯誤こそが、エンジニアとしての確かな成長の証なんですよ。
また何かあったら、いつでも聞きに来てくださいね！
コメント