【コピペでできる】cssでA4サイズぴったりに印刷できるようにレイアウトする方法

HTMLページで作成した帳票をA4サイズに収める

HTMLで出力しているページをA4横とかA4縦とかの帳票として印刷できるようにしたいことがあります。
社内用システムとか、需要ありますね。

A4サイズに綺麗に収まり、複数ページの場合は、しっかりとページが分かれるようにプリントアウトできるようにするためには、CSSでレイアウトすればイケます。

具体的なレイアウト方法をご紹介します。

HTMLの基本形

サンプルとして、月間の社員別営業成績表をA4サイズで印刷できるようなレイアウトを考えてみます。

<article>
<section>
<h1>2017年10月の成績</h1>
<table>
<thead>
<tr>
<th>社員番号</th>
<th>名前</th>
<th>獲得顧客数</th>
<th>売上高</th>
<th>売上高前年同期比</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>山田太郎</td>
<td>100</td>
<td>2,000,000</td>
<td>+ 10.0%</td>
</tr>
<tr>
<td>00003</td>
<td>鈴木一郎</td>
<td>90</td>
<td>1,900,000</td>
<td>+ 12.0%</td>
</tr>
<tr>
<td>00007</td>
<td>青山三郎</td>
<td>80</td>
<td>1,650,000</td>
<td>+ 2.0%</td>
</tr>
<tr>
<td>00004</td>
<td>遠山五郎</td>
<td>75</td>
<td>1,350,000</td>
<td>+ 15.0%</td>
</tr>
<tr>
<td>00910</td>
<td>柴崎六郎</td>
<td>50</td>
<td>1,200,000</td>
<td>+ 20.0%</td>
</tr>
</tdoby>
</table>
</section>
<section>
<h1>2017年9月の成績</h1>
<table>
<thead>
<tr>
<th>社員番号</th>
<th>名前</th>
<th>獲得顧客数</th>
<th>売上高</th>
<th>売上高前年同期比</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>山田太郎</td>
<td>100</td>
<td>2,000,000</td>
<td>+ 10.0%</td>
</tr>
<tr>
<td>00003</td>
<td>鈴木一郎</td>
<td>90</td>
<td>1,900,000</td>
<td>+ 12.0%</td>
</tr>
<tr>
<td>00007</td>
<td>青山三郎</td>
<td>80</td>
<td>1,650,000</td>
<td>+ 2.0%</td>
</tr>
<tr>
<td>00004</td>
<td>遠山五郎</td>
<td>75</td>
<td>1,350,000</td>
<td>+ 15.0%</td>
</tr>
<tr>
<td>00910</td>
<td>柴崎六郎</td>
<td>50</td>
<td>1,200,000</td>
<td>+ 20.0%</td>
</tr>
</tdoby>
</table>
</section>
<section>
<h1>2017年8月の成績</h1>
<table>
<thead>
<tr>
<th>社員番号</th>
<th>名前</th>
<th>獲得顧客数</th>
<th>売上高</th>
<th>売上高前年同期比</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>山田太郎</td>
<td>100</td>
<td>2,000,000</td>
<td>+ 10.0%</td>
</tr>
<tr>
<td>00003</td>
<td>鈴木一郎</td>
<td>90</td>
<td>1,900,000</td>
<td>+ 12.0%</td>
</tr>
<tr>
<td>00007</td>
<td>青山三郎</td>
<td>80</td>
<td>1,650,000</td>
<td>+ 2.0%</td>
</tr>
<tr>
<td>00004</td>
<td>遠山五郎</td>
<td>75</td>
<td>1,350,000</td>
<td>+ 15.0%</td>
</tr>
<tr>
<td>00910</td>
<td>柴崎六郎</td>
<td>50</td>
<td>1,200,000</td>
<td>+ 20.0%</td>
</tr>
</tdoby>
</table>
</section>
</article>

こんな感じ。すみません、手抜きで、成績数値は毎月同じです。。月ごとにページを分けて帳票印刷ができるようなイメージです。
ポイントは、ページを分けたいブロックを section で囲っている点。
これを article で括ってあげるとわかりやすいと思います。

当ブログでは、article や section の適切な使い方を紹介している記事もありますので、ご参考ください。

CSSでレイアウトする

HTMLで文書構造ができたら、A4印刷ができるようにスタイルを整えていきます。

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

この時、「media=”print”」とするのが重要です。

これは、印刷するときにだけ適用させる、というものになります。
そして、先ほどのHTMLのsectionにクラス名をつけます。

<article>
<section class="print_pages">
<h1>2017年10月の成績</h1>
<table>
<thead>
<tr>
<th>社員番号</th>
<th>名前</th>
<th>獲得顧客数</th>
<th>売上高</th>
<th>売上高前年同期比</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>山田太郎</td>
<td>100</td>
<td>2,000,000</td>
<td>+ 10.0%</td>
</tr>
<tr>
<td>00003</td>
<td>鈴木一郎</td>
<td>90</td>
<td>1,900,000</td>
<td>+ 12.0%</td>
</tr>
<tr>
<td>00007</td>
<td>青山三郎</td>
<td>80</td>
<td>1,650,000</td>
<td>+ 2.0%</td>
</tr>
<tr>
<td>00004</td>
<td>遠山五郎</td>
<td>75</td>
<td>1,350,000</td>
<td>+ 15.0%</td>
</tr>
<tr>
<td>00910</td>
<td>柴崎六郎</td>
<td>50</td>
<td>1,200,000</td>
<td>+ 20.0%</td>
</tr>
</tdoby>
</table>
</section>
<section class="print_pages">
<h1>2017年9月の成績</h1>
<table>
<thead>
<tr>
<th>社員番号</th>
<th>名前</th>
<th>獲得顧客数</th>
<th>売上高</th>
<th>売上高前年同期比</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>山田太郎</td>
<td>100</td>
<td>2,000,000</td>
<td>+ 10.0%</td>
</tr>
<tr>
<td>00003</td>
<td>鈴木一郎</td>
<td>90</td>
<td>1,900,000</td>
<td>+ 12.0%</td>
</tr>
<tr>
<td>00007</td>
<td>青山三郎</td>
<td>80</td>
<td>1,650,000</td>
<td>+ 2.0%</td>
</tr>
<tr>
<td>00004</td>
<td>遠山五郎</td>
<td>75</td>
<td>1,350,000</td>
<td>+ 15.0%</td>
</tr>
<tr>
<td>00910</td>
<td>柴崎六郎</td>
<td>50</td>
<td>1,200,000</td>
<td>+ 20.0%</td>
</tr>
</tdoby>
</table>
</section>
<section class="print_pages">
<h1>2017年8月の成績</h1>
<table>
<thead>
<tr>
<th>社員番号</th>
<th>名前</th>
<th>獲得顧客数</th>
<th>売上高</th>
<th>売上高前年同期比</th>
</tr>
</thead>
<tbody>
<tr>
<td>00001</td>
<td>山田太郎</td>
<td>100</td>
<td>2,000,000</td>
<td>+ 10.0%</td>
</tr>
<tr>
<td>00003</td>
<td>鈴木一郎</td>
<td>90</td>
<td>1,900,000</td>
<td>+ 12.0%</td>
</tr>
<tr>
<td>00007</td>
<td>青山三郎</td>
<td>80</td>
<td>1,650,000</td>
<td>+ 2.0%</td>
</tr>
<tr>
<td>00004</td>
<td>遠山五郎</td>
<td>75</td>
<td>1,350,000</td>
<td>+ 15.0%</td>
</tr>
<tr>
<td>00910</td>
<td>柴崎六郎</td>
<td>50</td>
<td>1,200,000</td>
<td>+ 20.0%</td>
</tr>
</tdoby>
</table>
</section>
</article>

もちろん、名前はなんでも良いんですけどね。わかりやすく、「print_pages」とでもつけてみました。

さて、CSSです。

.print_pages{
/*A4縦*/
width: 172mm;
height: 251mm;
page-break-after: always;
}
/*最後のページは改ページを入れない*/
.print_pages:last-child{
page-break-after: auto;
}

こんな感じ。
A4縦に最適なレイアウトにしたい場合は、widthを172mm、heightを251mmにします。
A4横だったら、この逆ですね。widthを251mm、heightを172mmです。

page-break-after: always;

は、改ページを意味します。
印刷モードの場合、「class=”print_pages”」の終わりは必ず改ページしてねっていう指定ですね。

続いて指定している、

.print_pages:last-child{
page-break-after: auto;
}

は、最後のページは改行を入れないでね、というものです。
これを入れておかないと、最後のページも改行が入ってしまい、空白の1ページが追加されてしまうことになります。

style要素で指定する場合

HTML内のstyle要素で、印刷時にスタイルがあたるようにするには、下記のように指定すればOKです。

<style type="text/css" media="print">
.print_pages{
/*A4縦*/
width: 172mm;
height: 251mm;
page-break-after: always;
}
/*最後のページは改ページを入れない*/
.print_pages:last-child{
page-break-after: auto;
}
<style>

media=”print” でstyleを定義すれば良いです。

他にも、

<style type="text/css" media="all">
@media print{
.print_pages{
/*A4縦*/
width: 172mm;
height: 251mm;
page-break-after: always;
}
/*最後のページは改ページを入れない*/
.print_pages:last-child{
page-break-after: auto;
}
}
</style>

という「Media Queries」を使った書き方もいけます。

固定ヘッダー、フッターをつける

印刷する際に、各ページにヘッダーやフッターをつけたい、ということも多いと思います。

先ほどのcssを下記のようにすれば良いです。

.print_pages{
/*A4縦*/
width: 172mm;
height: 251mm;
page-break-after: always;
position: relative;
counter-increment: page_count;
}
/*最後のページは改ページを入れない*/
.print_pages:last-child{
page-break-after: auto;
}
.print_pages:before{
position: absolute;
right: 0;
top: 0;
color: red;
content: "関係者外秘";
}
.print_pages:after{
position: absolute;
right: 0;
bottom: 0;
content: counter(page_count) "ページ";
}

基礎となる、print_pagesのpositionをrelativeにして、ヘッダー、フッターにあたる要素をそれぞれbefore、afterで指定し、position:absoluteで、固定表示する場所を指定します。

今回の例では、フッターにページ数を表示させています。
counter-incrementは、要素の連番カウンタの値を進める際に使用できるものです。ここにカウンタ名を定義(上記の例では、”page_count”)、表示させたい場所に、counter(定義名)で表示できます。

最後に、上記のデモサイトリンクを貼っておきます。ぜひ参考にしてください!

デモサイトはこちらをクリック

あわせて読みたい