Tweet
Tweet

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

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