印刷用CSS printCSS の改行や背景について

こんにちは。そらまめです。

今日はいつものガジェット系とは違い、Tech系の記事となります。

日頃多くのwebサイトを見ると思いますが、それらの見た目を調整しているのは

CSSというファイルです。

今日はそんなCSSの印刷時のお話をしようと思います。

印刷用CSS printcss とは

印刷用CSS printcssとはその名の通り、印刷時に使用されるCSSファイルのことです。

CSSファイルの読み込みを設定する際にmedia属性を付与して、特定の使用を行うことができます。

media属性には下記の項目がありますが、基本的には特段指定をしなければ、[all]の扱いとなります。

all 全てのデバイス
aural 音声合成装置
braille 点字出力デバイス
handheld 携帯電話など、画面が小さいデバイス
print プリンタでの印刷、あるいは印刷のプレビュー画面
projection プロジェクタ。Opera のフルスクリーンモード時もこれに該当します
screen 一般的なコンピュータスクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトはすべて対象になります
tty テレタイプなど、表示文字幅が固定されたデバイス
tv テレビなど、解像度や色数に制限があるデバイス

こんな感じでメディア属性には複数ありますが、だいたいwebサイトを作っていて指定して使うのはpintぐらいかと思います。

ちゃんと明示して対応させる場合はだと「screen」と「print」かなと思います。

そんな、pintですが、印刷要件が発生する場合には必須となりますし、

これが、なんだかんだで色々と面倒なのです。w

そんな、印刷用のCSS pint.cssを作成する際の注意点などをお伝えします。

印刷用のCSSの基礎知識

印刷用(print)cssを読み込ませる方法にはいくつかあります。

印刷(print)cssを別にファイルにして読み込ませる

印刷用(print)cssファイルを別で作って読み込ませる方法。

これは、HTMLのheadタグ内で読み込ませるときに「media=”print”」を使って読み込ませます。

実コードとしてはこのような形になります。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

CSSファイル内に印刷(print)指定を記載して読み込ませる

続いてはCSSファイルを別にせずに読み込ませる方法。

これは、読み込んでいるCSSファイル内に「Media Queries」を用いいて読み込ませます。

実コードとしてはこのような形になります。

@media print{
  印刷(print)CSSの定義を指定する
}

このように印刷(print)cssの適用方法はいくつかあります。

続いては、印刷(print)cssを作るときに必要になってくる改行のお話を。

印刷(print)cssでの改行方法

印刷(print)cssを作っていてよくあるのが、印刷内容が1ページに収まらずに、2ページに跨ってしまったり、

表の途中で次ページに行ってしまい、見にくいということが起きます。

これを解消する方法が「改行」の適用となります。

印刷(print)での改行方法もいくつかあります。

コンテンツの前で改行実施と禁止

あるコンテンツがあって、そのコンテンツの前で改行したい場合や、改行を避けたい場合に使えます。

実コードとしてはこのような形になります。

/* コンテンンツ前の改行実施 */
.contents {
  page-break-before: always;
}
/* コンテンンツ前の改行禁止 */
.contents {
  page-break-before: avoid;
}

このように、コンテンツ前の改行実施と禁止が対応できます。

続いては、コンテンツ後の改行実施と禁止ですが、基本構成は同じとなります。

コンテンツの後で改行実施と禁止

あるコンテンツがあって、その次のコンテンツは次ページに送りたい。というときに使えます。

実コードとしてはこのような形になります。

/* コンテンンツ後の改行実施 */
.contents {
  page-break-after: always;
}
/* コンテンンツ後の改行禁止 */
.contents {
  page-break-after: avoid;
}

このように、コンテンツ後の改行実施と禁止が対応できます。

続いては、コンテンツ内での改行実施と禁止についてです。

コンテンツの内での改行禁止

あるコンテンツで改行をささせたくない場合に使用できます。

これは、よくある表組みなどに適用しておくと表の途中でページ送りがされないので使用頻度はそれなりに高いものになるかと思います。

実コードとしてはこのような形になります。

/* コンテンンツ内の改行禁止 */
.contents {
  page-break-inside: avoid;
}

と、これらを実施することでコンテンツでの改行位置を決めることができます。

続いては、割と面倒な背景についてお話しします。

印刷(print)cssでの背景について

印刷(print)cssを作っていて気づくことがあるかと思いますが、

それが、背景画像や背景色が適用されないことです。

基本的に背景色や背景画像は印刷時において除外されています。

そのため、通常のままではwebで見るぶんにはきちんと適用されていても、印刷すると真っ白。なんてこともあります。

そんな、背景画像や背景色を適用する方法が一部のブラウザにおいては対応方法があります。

chrome,safari,firefoxにおいては下記対応で背景色を表示させることができます。

/* chrome,safari,firefox対応 */
body {
  -webkit-print-color-adjust: exact;
  printer-colors: exact;
  color-adjust: exact;
}
.contents {
  background-color: #000 !important;
}

しかし、厄介なのがIE11やEdg

IE11やEdgというブラウザにおいては、CSSで背景色を制御して表示させる機能がありません。

そのため、IE11やEdgでも背景色を表示させたい!という場合においては、

別途jsを記述し背景色の画像を用意してい適用させるなどの対応が必要となります。

しかし、ここまでする必要が本当にあるのか?というのは実施前に検討すべきかと思います。

実装者はできることの知識を持っておくべきですが、

それを全て組み合わせて対応するだけの必要性があるのかをきちんと判断することが一番大事です。

印刷(print)css作成におけるまとめ

印刷(print)cssは割と厄介です。w

ブラウザによって適用されるものやされないもの。

または、ヘッダーやフッターのデフォルト表示などなど、

ブラウザによってその仕様は様々です。

実装者は対象ブラウザでの検証を積み重ねながら、一番最適な解を見つける必要があります。

そのために、基礎として必要なお話を今回はしました。

「改行」と「背景画像・背景色」

この部分を知っているだけでも、作成時の敷居は下がるかと思います。

ブラウザは常に進化しているように、実装者も多くのスキルを手に入れて問題解決の手段を持っておく必要がありそうです。