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

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

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

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

## 調整前の状態
最初にいただいたHTMLは以下のような状態でした。
WEB上の見た目はしっかり整っています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/4ed8b0f6-3126-32ee-dfe5-a0a0e41360b8.png" width=100%>
そして、印刷プレビュー。

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

実際にいただいたHTMLは項目が多く、
印刷する範囲が2ページに分割されてしまっているという問題もありました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/c65a5b64-2572-82ca-1722-bec1f534db5a.png" width=60%>
では、さっそく印刷用のCSSを作っていい感じに調整していきます！

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

印刷用のCSS（print.css）を作成し、 link media="print"で読み込みます。
media="print"と書くことで、印刷の時だけこのCSSが適用されるようになります。
```ruby: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を指定します。
こうすることで、ヘッダーに表示されている日付やタイトル、
フッターに表示されているページ番号が非表示になります。
```ruby:CSS
@page {
	margin: 0mm 5mm;
	size: A4 portrait; //横の場合はlandscape
}
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/965b3616-cbbc-36a6-084d-cc500b1f12ba.png" width=70%>



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

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

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

```ruby:HTML
<body class="salary">
中身は省略
</body>
```

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

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

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

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

今回はセルに罫線を入れて、項目と内容を破線（---）で分けてみました。
こうすれば白黒でも見やすくなります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/c0d3535f-d01a-00c4-2653-e204aafdac90.png" width=100%>

```ruby: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>
```
```ruby: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. 給与明細っぽくする
給与明細っぽさってなんだろう？…調べて、情報を追加しました。
タイトル・会社名・社員番号・氏名を入れることで
一気に給与明細っぽくなりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/fb420561-dd14-67c3-2cde-078de90c6627.png" width=100%>
```ruby: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>
```
```ruby: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;
}
```

## 5. デベロッパーツールで見た目を調整する
作業している時に知りたかったのですが、実はこの記事をまとめている時に知りました。

デベロッパーツールで印刷用の見た目を画面上でも表示することができます。
一々Ctrl+Pを押して印刷プレビューを立ち上げる必要がなくなり効率的です。
作業している時に知りたかった………

Google Chromeで行う場合は、以下の手順で表示することができます。

1. デベロッパーツールを表示する
2. 左側にある［⋮］をクリックして［レンダリング］を選び、タブを表示する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/c4dde423-2e9d-81b4-8d3c-86ff0e77419f.png" width=60%>

3\. ［CSS メディアタイプをエミュレート］の項目にあるリストで［印刷］を選ぶ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/b5d19320-1905-9310-543c-fa27f390e80f.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/c8ce805b-633c-7711-bded-8d9946afb6e8.png" width=100%>

## 出来上がり！ before→afterを比較
そんなこんなで印刷用のCSSを適用させた給与明細が出来上がりました！
before→afterを比較してみます。

印刷プレビュー
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/0a436291-8048-4ac1-53db-f0623fae0c26.png" width=100%>
ついでにWEB上の表示も…
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309380/37af79f3-47e5-d525-1adb-b74bd5fdb339.png" width=100%>
…before→afterを見比べてみると、どうでしょうか？

印刷したい範囲がA4サイズ一枚に収まり、上下の不要な要素が消え、
意図しない部分での折返しがなくなり…全体的に見やすくなったと思います！
下の方に余白を設けたので、今後ある程度項目が増えても大丈夫そうです。

## まとめ
印刷用のCSSを作成するということ自体あまり機会がないかもしれませんが
例えば、画像編集ソフトを使わずに名刺を印刷したり、
ポートフォリオサイトを綺麗に印刷してもらいたい場合など…
あなたのアイディア次第で何かに活用できるかもしれません！

今後、印刷用のCSSを作成することになった！という時には、
この記事がヒントになれば幸いです。

## 参考記事

### 他にもこんなことができます！

・指定の箇所で改ページさせる
・ページ番号を表示させる

https://blog.asial.co.jp/1280

### 合わせて使いたい！

・HTMLで印刷ボタンを作る方法

https://junpei-sugiyama.com/html-print-button/