【コピペでできる】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;
}
は、最後のページは改行を入れないでね、というものです。
これを入れておかないと、最後のページも改行が入ってしまい、空白の１ページが追加されてしまうことになります。
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(定義名)で表示できます。
最後に、上記のデモサイトリンクを貼っておきます。ぜひ参考にしてください！
デモサイトはこちらをクリック
