Save 37% off PRO during our Black Friday Sale! »

今さらの @media print

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
September 20, 2018

今さらの @media print

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

September 20, 2018
Tweet

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. おわり! (源柔ゴシック)