X

【コピペでできる】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 の適切な使い方を紹介している記事もありますので、ご参考ください。

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

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(定義名)で表示できます。

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

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

shirushiru: