Slide 1
Slide 1 text
今さらの
@media print
Takanori Oki
@megro.css
Slide 2
Slide 2 text
自己紹介
• Takanori Oki (@takanorip)
• Frontend Developer
• Nuxt.js / Vue.js / Polymer / Web Components
• フォントが好きです
• 技術書典5の執筆忙しい
Slide 3
Slide 3 text
今日は
「印刷用CSS」
の話をします
Slide 4
Slide 4 text
みなさん
印刷用のCSSって
書いてますか？
Slide 5
Slide 5 text
@media printで定義
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
@page
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Safari以外なら
だいたい使える
Slide 11
Slide 11 text
sizeに指定できる値（抜粋）
value size
A5 148mm x 210mm
A4 210mm x 297mm
B5 176mm x 250mm
B4 250mm x 353mm
JIS-B5 182mm x 257mm
JIS-B4 257mm x 364mm
Slide 12
Slide 12 text
background-color
Slide 13
Slide 13 text
印刷時には背景色全て
無視されるので
背景色がなくても
大丈夫なようにCSSをあてる
Slide 14
Slide 14 text
ブラウザの設定を
いじればできるけど、
それをユーザーに強いるのは
微妙
Slide 15
Slide 15 text
Chromeだけ回避策がある
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
page-break系CSS
Slide 18
Slide 18 text
要素の中や前後の改行を
操作するプロパティ
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
注意点：
横並びになってる要素には効
かない
Slide 21
Slide 21 text
tableの子要素
flexboxの子要素
inline-block
float
Slide 22
Slide 22 text
印刷時は横並びを解除する
必要がある
Slide 23
Slide 23 text
横長tableは印刷できないので
印刷時だけ分割するとかする
Slide 24
Slide 24 text
良い印刷CSSライフを！
Slide 25
Slide 25 text
おわり！
（源柔ゴシック）