印刷用のCSSを書く方法

印刷時に適用させたいCSSを書く方法は以下の2パターンある。

  • 通常のスタイルシートにまとめて書く
  • 印刷用のスタイルシートを作る

通常のスタイルシートにまとめて書く

『通常のスタイルシートに書く』というのは、以下のように全てのCSSを書いている通常の『style.css』に印刷用のCSSも記述していく。

<link href="style.css" rel="stylesheet">
@media print {
  /* 印刷時に適用するスタイル */
  body {
    color: red;
  }
}

文字の色は黒だが、印刷ボタンをクリックして表示されるプレビューのテキストの色は赤になる。これは上記の印刷用のCSSでbodyの色を赤にしたからである。
もちろん色だけではなく、印刷時のみflex-boxを使って横並びから縦並びにしたり、不要な要素はdisplay: none;で非表示にする事も可能である。

印刷用のスタイルシートを作る

これは基本となる『style.css』とは別に『print.css』といった印刷用のスタイルシートを作り、そこにCSSを記述していく。

<!-- 基本のCSS -->
<link href="style.css" rel="stylesheet" />

<!-- 印刷用のCSS -->
<link href="print.css" rel="stylesheet" media="print" />

<link>タグにmedia=”print”を指定すれば、『print.css』に書いたCSSは印刷時のみ適用されるため、上記のような@media printという書き方をしなくてもよい。

/* 印刷用CSSに書く場合 */
body {
  color: red;
}

ブレイクポイントで印刷時のCSSを変える

ブレイクポイントで指定してCSSを変える事もできる。
ただし画面サイズではなく、印刷プレビューの幅に対して適用される（以下の例は、印刷プレビューのレイアウトで縦横変えるとテキストの色が変わる）。

/* 印刷時に適用するスタイル(768px以上) */
@media print and (min-width: 768px) {
  body {
    color: red;
  }
}

/* 印刷時に適用するスタイル(767px以下) */
@media print and (max-width: 767px) {
  body {
    color: blue;
  }
}

指定した範囲だけ印刷する方法

例えばヘッダーやフッターなど、印刷には不要なエリアも存在する。
指定した範囲だけ印刷する方法は以下の通り。

  1. HTML：非表示にしたい要素にclassを書く
  2. jQuery：印刷ボタンクリックで非表示にしたい要素にclass付与（1とは別）
  3. CSS：2で付与したclassに対してdispaly: none;

以下の例ではHTMLで非表示にしたい要素にclass=”js-print-hide”と書き、jQueryで印刷ボタンクリックして非表示にしたい要素にはclass=”print”を付与している。

<!-- 印刷ボタンクリック前 -->
<div class="js-print-hide">非表示にしたい要素</div>

<!-- 印刷ボタンクリック後 -->
<div class="js-print-hide print">非表示にしたい要素</div>
@media print {
  .print {
    display: none;
  }
}
$(function () {
  // 非表示にしたい要素
  const hide_print = $(".js-print-hide");
  // ボタンクリック
  $(".js-print-btn").click(function () {
    // ボタンクリックで非表示にしたい要素にclass="print"付与
    hide_print.addClass("print");
    // 印刷
    window.print();
    // 非表示にしたい要素のclass="print"を外す
    hide_print.removeClass("print");
  });
});

印刷ボタンをクリックしたらHTMLにclass=”print”が付与され、その要素はdisplay: none;で非表示になる。
また今回はjQueryでwindow.print();を設定しているので、HTMLでonclick=”window.print();”は不要となる。

inserted by FC2 system