印刷用CSSについて - シナプス技術者ブログ

WEBソリューション課の田畑です。

シナプスではお客様専用ページ「サービスカウンター」から、お客様ご自身で支払い方法の変更などの様々な手続きを行うことができます。

お客様専用ページ「サービスカウンター」ではWebページ閲覧のみで請求明細を確認できていたのですが、インボイスに対応するため印刷ボタンを設置しました。

印刷用CSSについては今まであまり触れてこなかったので、これを機会にまとめてみました。

印刷用CSSの指定方法
- 1.読み込み先のCSSファイルの@mediaで設定する
- 2.htmlファイルのmedia=“print”で設定する
指定方法の選択
- CSSファイルの構成
各指定について
- print.css：印刷ページ共通CSS
- billing.css：請求明細専用CSS
まとめ

印刷用CSSの指定方法

指定方法としては２種類あります。

1.読み込み先のCSSファイルの@mediaで設定する

CSSファイルの中で複数のメディアと組み合わせることもできます。

プリンターが対象
@media print { ... }
画面とプリンターが対象
@media screen, print { ... }
プリンターと画面（幅が769px以上）が対象
@media print, screen and (min-width:769px) { ... }

2.htmlファイルのmedia=“print”で設定する

HTMLで指定すると印刷の時のみリンク先のCSSが有効になります。

<link rel="stylesheet" href="" media=“print”>

指定方法の選択

どのような指定方法にするかを検討し、今回は以下の設定にしました。

印刷が必要なページに読み込ませて、1.の読み込み先のCSSファイルの@mediaで設定。page-printのクラス指定も併用した。

今回の場合ヘッダーフッター要素（ページ上部のロゴなどが掲載されている箇所などです）などを印刷の対象から外す指定を入れていますので、サイト全部に読み込ませると印刷時に全ページにてヘッダーフッターやボタンが印刷されなくなります。それでいいかどうか判断を迷ったため、とりあえずは必要なページのみへの読み込みとしました。もし今後全ページ読み込みになった場合でもpage-printのクラス指定で印刷設定が有効になるようにし、印刷設定が必要ないページに読み込んでもクラス指定を入れない限り影響を受けないような形にしました。今後運用していく中で、どの形がベストなのか調整していきたいと思っています。

CSSファイルの構成

始めは全ページ共通用parts.cssに記載していましたが、請求明細で使うcssは量が多く複雑でしたので、請求明細のみで使用しているCSSはbilling.cssへ移動させました。

共通CSSフォルダ

header-footer.css：ヘッダーフッター用
parts.css：全ページ共通用
print.css：印刷ページ共通用
reset-base.cssデフォルトCSSの調整用

CSSフォルダ

billing.css：請求明細専用
各ページのCSSファイル等

各指定について

print.css：印刷ページ共通CSS

不要な要素の削除

印刷時にはヘッダーやフッター、パンくず、ボタンなどは不要なのでdisplay: none;で印刷時に消えるように指定します。他にもコンテンツを囲んでいたdivなど余計なものも消します。

.page-print .header{
        display: none;
    }
.page-print .month-menu{
        display: none;
    }
.page-print .breadcrumbs{
        display: none;
    }
.page-print .button-submit{
        display: none;
    }

Tableの改ページの指定

テーブルの中身を印刷時にどう処理するかを決めます。

table {
        break-inside: auto; /* テーブル内の改ページを許可する */
    }
tr {
        break-inside: avoid; /* 行内の改ページを避ける */
        break-after: auto; /* 行の後で改ページを許可する */
    }

Tableのヘッダーフッター要素の指定

Tableの中身が長い場合は次のページに続きが印刷されます。その時にヘッダー要素が次のページの先頭、フッターであればページの最後に印刷されるようになります。

thead {
        display: table-header-group;
    }
tfoot {
        display: table-footer-group;
    }

印刷時の用紙の指定

@page は文書を印刷するときにプロパティを変更するために使用します。変更できるのは、マージン、orphans、widows と、文書のページ区切りのみ。

@page {
    size: A4 portrait; /* 紙の寸法と向きを指定する */
    margin: 20mm 10mm 10mm 10mm;
}

その他の指定

.break-after{
        break-after:page;
    }

break-after はCSSのプロパティで、生成されたボックスの後で、ページ、段、領域をどのように区切るかを設定します。これを入れるとそこから後の内容は改ページされて印刷されます。

billing.css：請求明細専用CSS

請求明細の中にご利用金額内訳という項目があります。
この項目はレスポンシブ対応のため、dlタグで作成してあります。そのため先程の「Tableのヘッダーフッター要素の指定」が効きません。

10個内訳項目が表示されたらテーブルのヘッダーにあたる部分が表示されるようにプログラムを入れてもらいました。 CSSで10個内訳項目が表示されたら改ページ印刷されるように指定を入れています。（なぜか見出し部分も1としてカウントされているようだったので、ここでは11nで設定しています。）これで内訳が10個毎に改ページ印刷されて、ページテーブルのヘッダーにあたる部分が一番上に毎回印刷されるようになりました。

JSPファイル（シナプスのお客様専用ページはJSPファイルを使って作成しています。JSPファイルはHTMLの中にJavaのコードを埋め込んであるファイルです。）

<c:if test="${status.index > 0 && status.index % 10 == 0}">
    <ul class="billing-info__title billing-info__title--print">
      <li class="billing-info__day">日付</li>
      <li class="billing-info__category">明細項目</li>
      <li class="billing-info__num">数量</li>
      <li class="billing-info__price">金額</li>
      <li class="billing-info__tax">税区分</li>
    </ul>
</c:if>

CSSファイル

.billing-info__item:nth-child(11n){
        break-after: page;
    }

まとめ

プリンターやブラウザはユーザーごとに違うので、こちらでいろいろ設定しても思ったように行かない可能性があります。そのため必要最低限の設定にしておいたほうが良さそうです。（実際、自分の時だけプレビューの時と実際の印刷時に三枚目の白紙が出るという症状が起きました。理由は解明できず・・・。数人にテストしてもらいましたが自分だけでした。）

今回共通の印刷設定を作成できたので、今後他に印刷が必要なページが出てきた場合、スムーズに対処できそうです。