今さらの @media print

Transcript

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