A4サイズ1ページに収まる印刷用のCSSを書く - Qiita

印刷用のCSSを書くことになった経緯 「給与明細を印刷に適した見た目にしたい」というご要望があり、 CSSで調整することになりました。 今まで印刷用のCSSに触れたことがなく、 そもそも印刷用のCSSとは一体…？という状態からのスタート… 出来上がったソースは大したことないのですが、 はじめて印刷用の記述を書いて個人的に勉強になったので 作業手順をまとめてみることにしました。 調整前の状態 最初にいただいたHTMLは以下のような状態でした。 WEB上の見た目はしっかり整っています。 そして、印刷プレビュー。 こちらは各項目の情報がどこに紐付いているか分かりにくく、 また、意図しない場所でテキストが折り返していて見た目が良くありません。 実際にいただいたHTMLは項目が多く、 印刷する範囲が2ページに分割されてしまっているという問題もありました。 では、さっそく印刷用のCSSを作っていい感じ