今回やりたいこと

私はあまり意識してこなかったのですが、サイトの種類や内容によっては印刷することが多くなるようなWebサイトもありますよね。

ベースの段階から印刷やPDF化を意識したコーディングをすることで、サイトが出来上がった後に「印刷しても崩れないようにしてほしい」などといった混乱を防ぐことができます。

印刷に適した記述や、ファイルの設置方法について今回はまとめてみます。

メディアタイプで振り分ける

私はCSSを書くときにミックスインを使っていますが、改めて見直してみるとメディアタイプは「all」で設定していることが多かったです。

@mixin mq {
  @media all and (min-width: $break-point + 1px) {
    @content;
  }
}

「all」はすべてのメディアタイプに適用するということになります。逆にブラウザのみに適用させたい場合は「screen」、印刷時にだけ適用させたい場合は「print」となります。

このメディアタイプ（@media）を使用してブラウザと印刷用でCSSを分けるという方法がまずあります。

1つのCSSファイルにまとめることもできて、うまく使いこなせれば効率的にCSSを分けることができます。

headタグ内でCSSを読み込ませるときの「media=””」部分は「all」を指定します。

改ページも綺麗にさせたい

特に印刷を意識していないWebサイトの場合、ヘッダーやフッター（固定表示させている要素）がすべてのページに出力されたり、文章の途中など、区切りの悪いところで改ページされていることが多いです。

固定要素を非表示

非表示にさせる場合は単純に、印刷用のメディアタイプである「@media print{}」内に、印刷時に非表示にさせるクラスを作成して、「display: none;」を指定すればOKです。

@media print {
  .hidden-print {
    display: none;
  }
}

改ページ

恥ずかしながら今頃知ったのですが、改ページをしてくれる便利なCSSプロパティがありました。

page-break-beforeに「always」を指定すると、その要素の手前で改ページしてくれます。

公式ドキュメントはこちら

これも非表示にさせるときと同じように、改ページ用のクラスを1つ作ってあげればOKです。

@media print {
  .page-breaker {
    page-break-before: always;
    // break-before: always;
  }
}

A4で印刷したい

特に指定しなければレスポンシブサイトを印刷するとき、A4の用紙を指定した場合はスマホのCSSが適用されている状態になってしまうと思います。

A3サイズを指定すればPCのCSSが適用されている状態になると思いますが、A4で印刷したいということも多いと思います。

これも今回初めて知ったのですが「@page{}」を使うと、用紙のサイズを指定することができるようです。

@page {  
  size: A4 portrait;  // portraitは縦
  margin: ページの余白（mm）;  
}

以下のように数値で指定することも可能です。

@page { size: 210mm 297mm } /* A4縦サイズ */

@pageの公式ドキュメントはこちら

自分用メモ

メディアクエリの指定で、以下のように設定するとPCに適用させるCSSがそのまま印刷用にも反映される。

※逆にスマホ用のメディアクエリは「screen」だけを指定すればよい。「all」はあまり使用しない方が良いかも。

@mixin mq {
  @media screen, print and (min-width: $break-point + 1px) {
    @content;
  }
}

印刷にこだわっている場合、スマホのデザインを出力したいということはほとんどないと思うので、A4でもPCのデザインが出力できるようにしてあげた方が親切ですよね。

今回はサイトが完成したあとに印刷とPDFにも対応してほしいという依頼を受けましたが、制作段階からあらかじめ出来るだけ手がかからない方法で印刷にも対応できる最も適切な方法を試行錯誤して調べてみようと思いました。