Asial Blog

Recruit! Asialで一緒に働きませんか?

CSSで印刷レイアウトをコントロール

カテゴリ :
フロントエンド(HTML5)
タグ :
HTML5
CSS
Webサイトを制作する上で印刷された時の見栄えを考慮しなければならないことがたまにあります。
考慮しないでコーディングをしてしまうと印刷時にコンテンツが複数ページにわたってしまい変なところで別ページに分割されることがあります。

それをこんな感じに綺麗に改ページを行うためのHTMLの構成とCSSの組み方を考えてみます。


※Chromeを使って確認したコードなのでChromeで確認して下さい。

HTML構成


まず、HTMLの構成から考えてみます。

1つのページは<section>タグを使用します。
そして、複数のページを<article>タグでまとめます。

つまりHTMLとしては下記のような構成になります。

  1. <article>
  2.     <section>
  3.          <h1>1ページ目</h1>
  4.     </section>
  5.     <section>
  6.          <h1>2ページ目</h1>
  7.     </section>
  8.     <section>
  9.          <h1>3ページ目</h1>
  10.     </section>
  11. </article>

改ページ


ここにCSSを当てていき印刷すると綺麗にページが分かれるように組んでいきます。

まず、<section>タグに.print_page、<article>タグに.print_pagesというクラスを付けていきます。
ついでにprint.cssというスタイルシートを読み込みます。

  1. <link media="print" rel="stylesheet" href="print.css">
  2. <article>
  3.     <section class="print_page">
  4.         <h1>1ページ目</h1>
  5.     </section>
  6.     <section class="print_page">
  7.         <h1>2ページ目</h1>
  8.     </section>
  9.     <section class="print_page">
  10.         <h1>3ページ目</h1>
  11.     </section>
  12. </article>

print.cssに.print_pageクラスの中身を定義していきます。
今回はA4縦でピッタリ印刷できるよう組んでいきます。

  1. .print_page{
  2.     width: 172mm; /* A4縦の幅 */
  3.     height: 251mm; /* A4縦の高さ */
  4.     page-break-after: always; /* 各ページの終わりに改ページ */
  5. }

この状態で印刷プレビューを行うと<section>内の文字列がページごとに分かれるようになっているはずです。

改ページ修正


このままでは空白の4ページ目ができてしまいますので最後のページは改ページさせないようにします。

  1. .print_page{
  2.     width: 172mm;
  3.     height: 251mm;
  4.     page-break-after: always;
  5. }
  6. .print_page:last-child{
  7.     page-break-after: auto; /* 最後のページの改ページを防ぐ */
  8. }

最後の<section>タグにpage-break-afterをautoにすることで最後のページの改行を防ぐことができます。
逆にpage-break-beforeを使って、最初の<section>タグにpage-break-afterをautoとしても同じことができます。

固定ヘッダー


簡単に出来てしまいましたがこのままではつまらないので固定ヘッダーを入れてみます。

  1. .print_page{
  2.     width: 172mm;
  3.     height: 251mm;
  4.     page-break-after: always;
  5.     position: relative; /* 固定ヘッダーの基準座標を定義 */
  6. }
  7. .print_page:last-child{
  8.     page-break-after: auto;
  9. }
  10.  
  11. .print_page:before{
  12.     position: absolute; /* 位置の相対指定 */
  13.     right: 0; /* 右から0ピクセルの位置指定 */
  14.     top: 0; /* 上から0ピクセルの位置指定 */
  15.     content: "Asial CSS Print Demo"; /* ヘッダーのテキスト */
  16. }

.print_pageのスタイルにposition: relative;を入れた後にbefore擬似要素でヘッダーを入れます。
position: relative;を入れないと1ページ目の右上にヘッダーが集まってしまうので気をつけてください。

これで各ページの右上にAsial CSS Print Demoという文字が表示されます。

固定フッターとCSSによる自動付番


最後に各ページのフッターにCSSだけを使ってページ番号を入れてみたいと思います。

  1. .print_page{
  2.     width: 172mm;
  3.     height: 251mm;
  4.     page-break-after: always;
  5.     position: relative;
  6.     counter-increment: print_page_count; /* ページ番号のインクリメント */
  7. }
  8. .print_page:last-child{
  9.     page-break-after: auto;
  10. }
  11. .print_page:before{
  12.     position: absolute;
  13.     right: 0;
  14.     top: 0;
  15.     content: "Asial CSS Print Demo";
  16. }
  17. .print_page:after{
  18.     position: absolute; /* 位置の相対指定 */
  19.     right: 0; /* 右から0ピクセルの位置指定 */
  20.     bottom: 0; /* 下から0ピクセルの位置指定 */
  21.     content: counter(print_page_count) "ページ"; /* ページ番号を擬似要素に表示 */
  22. }

使用するCSSプロパティはcounter-incrementとcounterです。
このプロパティを使用するとCSS内でカウント用の変数を扱うことができ擬似要素内で表示させることができます。

変数名は何でもいいのですが分かりやすい名前としてprint_page_countという変数名にしました。

この状態で印刷プレビューをすると3ページに分かれ、なおかつ固定のヘッダーとフッターが各ページに表示されるはずです。

あまり用途がないノウハウではありますがいざとなった時のために覚えておいて損は無いと思います。