印刷用CSSのメモ - かもメモ

WEBページを印刷する需要ってもうそんなに無い気もするのだけれど、必要になったのでメモ。

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

印刷用のスタイルは print.css だけで完結する

印刷用のメディアクエリを追加するCSSは印刷時にも有効になるようにmedia="all"で指定します

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

main.css 内に下記のメディアクエリを作成してその中に印刷用のCSSを記述する

@media print {
  /* 印刷用のCSS */
}

※ 印刷時もWEB表示用のCSSも有効になるので、不要なスタイルはこのメディアクエリ内で打ち消す必要がある。

まだ対応していないブラウザもありますが、用紙サイズや空きなどの指定が行なえます。 f:id:kikiki-kiki:20171212230215p:plain
Can I use... Support tables for HTML5, CSS3, etc

例:
A4サイズ上下12mm 左右7mm空き

@pront {
  size: A4
  margin: 12mm 7mm;
}

用紙サイズ指定 size: <width> < height > で指定

@page { size: 120mm 297mm; } /* A4サイズ */

A4 縦向き (A4が 210mm x 297mm なので portrait は省略可 )

@page { size: A4 portrait; }

A4 横向き

@page { size: A4 landscape; }

サイズに指定できるキーワード

[参考]