More than 1 year has passed since last update.

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

Last updated at 2022-11-18Posted at 2022-11-18

印刷用のCSSを書くことになった経緯

「給与明細を印刷に適した見た目にしたい」というご要望があり、
CSSで調整することになりました。

今まで印刷用のCSSに触れたことがなく、
そもそも印刷用のCSSとは一体…？という状態からのスタート…

出来上がったソースは大したことないのですが、
はじめて印刷用の記述を書いて個人的に勉強になったので
作業手順をまとめてみることにしました。

調整前の状態

最初にいただいたHTMLは以下のような状態でした。
WEB上の見た目はしっかり整っています。

そして、印刷プレビュー。

こちらは各項目の情報がどこに紐付いているか分かりにくく、
また、意図しない場所でテキストが折り返していて見た目が良くありません。

実際にいただいたHTMLは項目が多く、
印刷する範囲が2ページに分割されてしまっているという問題もありました。

では、さっそく印刷用のCSSを作っていい感じに調整していきます！

1. link要素で印刷用CSSを読み込む

印刷用のCSS（print.css）を作成し、 link media="print"で読み込みます。
media="print"と書くことで、印刷の時だけこのCSSが適用されるようになります。

HTML

<link href="css/print.css" media="print" rel="stylesheet" type="text/css" />

2. A4サイズ1ページに収まるように設定する

先程作成したprint.cssに記述を追加していきます。

まず、 @pageで印刷時の用紙サイズを指定します。
今回はA4サイズ1ページに収めたいので、sizeプロパティを使いA4を指定します。

縦の場合はportrait、横の場合はlandscapeと指定します。
他にもA3、B5などの指定が可能です。

次に、marginに0mmを指定します。
こうすることで、ヘッダーに表示されている日付やタイトル、
フッターに表示されているページ番号が非表示になります。

CSS

@page {
	margin: 0mm 5mm;
	size: A4 portrait; //横の場合はlandscape
}

全体を囲っているclassにもスタイルを当てていきます。

A4（縦）の大きさは、横210mm×縦297mmなので、
widthとheightにそれぞれ数値を入れます。

最後に、padding-topで上部の余白を指定します。

HTML

<body class="salary">
中身は省略
</body>

CSS

.salary {
	padding-top: 5mm;
	width: 210mm;
	height: 297mm;
}

3. テーブルを印刷用に見やすく調整する

画面上ではセルの背景に薄いピンク色が入っていますが、
印刷の場合は白黒で出力されることを考慮して調整します。

インク代のことを考えると、
なるべくベタの背景は避けたほうが良いかもしれません！

今回はセルに罫線を入れて、項目と内容を破線（---）で分けてみました。
こうすれば白黒でも見やすくなります。

HTML

<table class="table table-striped" style="margin-bottom: -1px;">
    <tbody>
        <tr>
            <th style="width: 12.5%;">◯◯手当</th>
            <td colspan="1" style="width: calc(100% / 4 * 1 - 12.5%);">
                <div class="form-group text-right" style="margin-bottom: 0;">100,000 円</div>
            </td>
            <th style="width: 12.5%;">◯◯手当</th>
            <td colspan="1" style="width: calc(100% / 4 * 1 - 12.5%);">
                <div class="form-group text-right" style="margin-bottom: 0;">100,000 円</div>
            </td>
            <th style="width: 12.5%;">◯◯手当</th>
                <td colspan="1" style="width: calc(100% / 4 * 1 - 12.5%);">
                <div class="form-group text-right" style="margin-bottom: 0;">100,000 円</div>
            </td>
            <th style="width: 12.5%;">◯◯手当</th>
            <td colspan="1" style="width: calc(100% / 4 * 1 - 12.5%);">
                <div class="form-group text-right" style="margin-bottom: 0;">100,000 円</div>
            </td>
        </tr>
    </tbody>
</table>

CSS

/* テーブル */
.salary table {
	border: 1px solid #000;
}
.salary table tbody tr td,
.salary table tbody tr th {
	padding: 0 6px;
	height: 40px;
	border-top: 1px solid #000;
	border-right: 1px dashed #888;
	border-bottom: 1px solid #000;
	vertical-align: middle;
	font-size: 10px;
	line-height: 1.2;
}
.salary table tbody tr th {
	border-left: 1px solid #000;
	text-align: left !important;
}
.salary table tbody tr td {
	border-right: 1px solid #000;
}
.salary table tbody tr td div {
	text-align: right !important;
}

4. 給与明細っぽくする

給与明細っぽさってなんだろう？…調べて、情報を追加しました。
タイトル・会社名・社員番号・氏名を入れることで
一気に給与明細っぽくなりました。

HTML

<div class="salary-title">12月分給与明細</div>
<div class="salary-header">
    <div class="text-right">株式会社◯◯◯◯</div>
    <ul class="salary-list">
        <li>社員番号：000</li>
        <li>社員名：山田　太郎（ヤマダ　タロウ）</li>
    </ul>
</div>

CSS

/* タイトル・見出し */
.salary .salary-title {
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}
.salary h4 {
	margin-bottom: 8px!important;
	margin-left: -6px;
	font-size: 12px;
}

/* ヘッダー */
.salary .salary-header {
	margin-bottom: 20px;
	font-size: 12px;
}
.salary .salary-header .salary-list {
	margin-top: 20px;
	padding-inline-start: 0;
}
.salary .salary-header .salary-list li {
	margin-bottom: 10px;
	width: 350px;
	border-bottom: 1px solid #000;
	list-style-type: none;
}