Web制作初心者のための技術情報サイト -知るWeb-

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

by ·


Webデザイン入門オンライン講座 Udemy

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

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

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

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

HTMLの基本形

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

ソースを表示
印刷SyntaxHighlighterについて
001<article>
002    <section>
003         <h1>2017年10月の成績</h1>
004           <table>
005            <thead>
006              <tr>
007                <th>社員番号</th>
008                <th>名前</th>
009                <th>獲得顧客数</th>
010                <th>売上高</th>
011                <th>売上高前年同期比</th>
012              </tr>
013            </thead>
014            <tbody>
015              <tr>
016                <td>00001</td>
017                <td>山田太郎</td>
018                <td>100</td>
019                <td>2,000,000</td>
020                <td>+ 10.0%</td>
021              </tr>
022              <tr>
023                <td>00003</td>
024                <td>鈴木一郎</td>
025                <td>90</td>
026                <td>1,900,000</td>
027                <td>+ 12.0%</td>
028              </tr>
029              <tr>
030                <td>00007</td>
031                <td>青山三郎</td>
032                <td>80</td>
033                <td>1,650,000</td>
034                <td>+ 2.0%</td>
035              </tr>
036              <tr>
037                <td>00004</td>
038                <td>遠山五郎</td>
039                <td>75</td>
040                <td>1,350,000</td>
041                <td>+ 15.0%</td>
042              </tr>
043              <tr>
044                <td>00910</td>
045                <td>柴崎六郎</td>
046                <td>50</td>
047                <td>1,200,000</td>
048                <td>+ 20.0%</td>
049              </tr>
050            </tdoby>
051           </table>
052    </section>
053    <section>
054         <h1>2017年9月の成績</h1>
055           <table>
056            <thead>
057              <tr>
058                <th>社員番号</th>
059                <th>名前</th>
060                <th>獲得顧客数</th>
061                <th>売上高</th>
062                <th>売上高前年同期比</th>
063              </tr>
064            </thead>
065            <tbody>
066              <tr>
067                <td>00001</td>
068                <td>山田太郎</td>
069                <td>100</td>
070                <td>2,000,000</td>
071                <td>+ 10.0%</td>
072              </tr>
073              <tr>
074                <td>00003</td>
075                <td>鈴木一郎</td>
076                <td>90</td>
077                <td>1,900,000</td>
078                <td>+ 12.0%</td>
079              </tr>
080              <tr>
081                <td>00007</td>
082                <td>青山三郎</td>
083                <td>80</td>
084                <td>1,650,000</td>
085                <td>+ 2.0%</td>
086              </tr>
087              <tr>
088                <td>00004</td>
089                <td>遠山五郎</td>
090                <td>75</td>
091                <td>1,350,000</td>
092                <td>+ 15.0%</td>
093              </tr>
094              <tr>
095                <td>00910</td>
096                <td>柴崎六郎</td>
097                <td>50</td>
098                <td>1,200,000</td>
099                <td>+ 20.0%</td>
100              </tr>
101            </tdoby>
102           </table>
103    </section>
104    <section>
105         <h1>2017年8月の成績</h1>
106           <table>
107            <thead>
108              <tr>
109                <th>社員番号</th>
110                <th>名前</th>
111                <th>獲得顧客数</th>
112                <th>売上高</th>
113                <th>売上高前年同期比</th>
114              </tr>
115            </thead>
116            <tbody>
117              <tr>
118                <td>00001</td>
119                <td>山田太郎</td>
120                <td>100</td>
121                <td>2,000,000</td>
122                <td>+ 10.0%</td>
123              </tr>
124              <tr>
125                <td>00003</td>
126                <td>鈴木一郎</td>
127                <td>90</td>
128                <td>1,900,000</td>
129                <td>+ 12.0%</td>
130              </tr>
131              <tr>
132                <td>00007</td>
133                <td>青山三郎</td>
134                <td>80</td>
135                <td>1,650,000</td>
136                <td>+ 2.0%</td>
137              </tr>
138              <tr>
139                <td>00004</td>
140                <td>遠山五郎</td>
141                <td>75</td>
142                <td>1,350,000</td>
143                <td>+ 15.0%</td>
144              </tr>
145              <tr>
146                <td>00910</td>
147                <td>柴崎六郎</td>
148                <td>50</td>
149                <td>1,200,000</td>
150                <td>+ 20.0%</td>
151              </tr>
152            </tdoby>
153           </table>
154    </section>
155</article>

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

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

HTML5タグ articleやsectionなど 構造化タグがわかる 初心者向け
http://shiru-web.com/2017/04/05/01-11/
HTML5の構造化タグはたくさんありますが、まずは押さえるべき「ページ全体に関するもの」と「セクション（＝コンテンツにおける区切り）に関するもの」について紹介して...

CSSでレイアウトする

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

ソースを表示
印刷SyntaxHighlighterについて
1<link media="print" rel="stylesheet" href="print.css">

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

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

ソースを表示
印刷SyntaxHighlighterについて
001<article>
002    <section class="print_pages">
003         <h1>2017年10月の成績</h1>
004           <table>
005            <thead>
006              <tr>
007                <th>社員番号</th>
008                <th>名前</th>
009                <th>獲得顧客数</th>
010                <th>売上高</th>
011                <th>売上高前年同期比</th>
012              </tr>
013            </thead>
014            <tbody>
015              <tr>
016                <td>00001</td>
017                <td>山田太郎</td>
018                <td>100</td>
019                <td>2,000,000</td>
020                <td>+ 10.0%</td>
021              </tr>
022              <tr>
023                <td>00003</td>
024                <td>鈴木一郎</td>
025                <td>90</td>
026                <td>1,900,000</td>
027                <td>+ 12.0%</td>
028              </tr>
029              <tr>
030                <td>00007</td>
031                <td>青山三郎</td>
032                <td>80</td>
033                <td>1,650,000</td>
034                <td>+ 2.0%</td>
035              </tr>
036              <tr>
037                <td>00004</td>
038                <td>遠山五郎</td>
039                <td>75</td>
040                <td>1,350,000</td>
041                <td>+ 15.0%</td>
042              </tr>
043              <tr>
044                <td>00910</td>
045                <td>柴崎六郎</td>
046                <td>50</td>
047                <td>1,200,000</td>
048                <td>+ 20.0%</td>
049              </tr>
050            </tdoby>
051           </table>
052    </section>
053    <section class="print_pages">
054         <h1>2017年9月の成績</h1>
055           <table>
056            <thead>
057              <tr>
058                <th>社員番号</th>
059                <th>名前</th>
060                <th>獲得顧客数</th>
061                <th>売上高</th>
062                <th>売上高前年同期比</th>
063              </tr>
064            </thead>
065            <tbody>
066              <tr>
067                <td>00001</td>
068                <td>山田太郎</td>
069                <td>100</td>
070                <td>2,000,000</td>
071                <td>+ 10.0%</td>
072              </tr>
073              <tr>
074                <td>00003</td>
075                <td>鈴木一郎</td>
076                <td>90</td>
077                <td>1,900,000</td>
078                <td>+ 12.0%</td>
079              </tr>
080              <tr>
081                <td>00007</td>
082                <td>青山三郎</td>
083                <td>80</td>
084                <td>1,650,000</td>
085                <td>+ 2.0%</td>
086              </tr>
087              <tr>
088                <td>00004</td>
089                <td>遠山五郎</td>
090                <td>75</td>
091                <td>1,350,000</td>
092                <td>+ 15.0%</td>
093              </tr>
094              <tr>
095                <td>00910</td>
096                <td>柴崎六郎</td>
097                <td>50</td>
098                <td>1,200,000</td>
099                <td>+ 20.0%</td>
100              </tr>
101            </tdoby>
102           </table>
103    </section>
104    <section class="print_pages">
105         <h1>2017年8月の成績</h1>
106           <table>
107            <thead>
108              <tr>
109                <th>社員番号</th>
110                <th>名前</th>
111                <th>獲得顧客数</th>
112                <th>売上高</th>
113                <th>売上高前年同期比</th>
114              </tr>
115            </thead>
116            <tbody>
117              <tr>
118                <td>00001</td>
119                <td>山田太郎</td>
120                <td>100</td>
121                <td>2,000,000</td>
122                <td>+ 10.0%</td>
123              </tr>
124              <tr>
125                <td>00003</td>
126                <td>鈴木一郎</td>
127                <td>90</td>
128                <td>1,900,000</td>
129                <td>+ 12.0%</td>
130              </tr>
131              <tr>
132                <td>00007</td>
133                <td>青山三郎</td>
134                <td>80</td>
135                <td>1,650,000</td>
136                <td>+ 2.0%</td>
137              </tr>
138              <tr>
139                <td>00004</td>
140                <td>遠山五郎</td>
141                <td>75</td>
142                <td>1,350,000</td>
143                <td>+ 15.0%</td>
144              </tr>
145              <tr>
146                <td>00910</td>
147                <td>柴崎六郎</td>
148                <td>50</td>
149                <td>1,200,000</td>
150                <td>+ 20.0%</td>
151              </tr>
152            </tdoby>
153           </table>
154    </section>
155</article>

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

さて、CSSです。

ソースを表示
印刷SyntaxHighlighterについて
01.print_pages{
02  /*A4縦*/
03    width: 172mm;
04    height: 251mm;
05    page-break-after: always;
06}
07  /*最後のページは改ページを入れない*/
08.print_pages:last-child{
09    page-break-after: auto;
10}

こんな感じ。
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です。

ソースを表示
印刷SyntaxHighlighterについて
01<style type="text/css" media="print">
02.print_pages{
03/*A4縦*/
04  width: 172mm;
05  height: 251mm;
06  page-break-after: always;
07}
08  /*最後のページは改ページを入れない*/
09.print_pages:last-child{
10    page-break-after: auto;
11}
12<style>

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

他にも、

ソースを表示
印刷SyntaxHighlighterについて
01<style type="text/css" media="all">
02  @media print{
03      .print_pages{
04    /*A4縦*/
05      width: 172mm;
06      height: 251mm;
07      page-break-after: always;
08    }
09      /*最後のページは改ページを入れない*/
10    .print_pages:last-child{
11        page-break-after: auto;
12    }
13  }
14</style>

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

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

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

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

ソースを表示
印刷SyntaxHighlighterについて
01.print_pages{
02/*A4縦*/
03  width: 172mm;
04  height: 251mm;
05  page-break-after: always;
06  position: relative;
07  counter-increment: page_count;
08}
09  /*最後のページは改ページを入れない*/
10.print_pages:last-child{
11    page-break-after: auto;
12}
13.print_pages:before{
14    position: absolute;
15    right: 0;
16    top: 0;
17    color: red;
18    content: "関係者外秘";
19}
20.print_pages:after{
21    position: absolute;
22    right: 0;
23    bottom: 0;
24    content: counter(page_count) "ページ";
25}

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

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

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

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

あわせて読みたい