今さらの @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で定義

6. None

7. @page

8. None
9. None

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だけ回避策がある

16. None

17. page-break系CSS

18. 要素の中や前後の改行を 操作するプロパティ

19. None

20. 注意点： 横並びになってる要素には効 かない

21. tableの子要素 flexboxの子要素 inline-block float

22. 印刷時は横並びを解除する 必要がある

23. 横長tableは印刷できないので 印刷時だけ分割するとかする

24. 良い印刷CSSライフを！

25. おわり！ （源柔ゴシック）