Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今さらの @media print

Avatar for takanorip takanorip
September 20, 2018
Technology
2
490

今さらの @media print

Avatar for takanorip

takanorip

September 20, 2018
Tweet

More Decks by takanorip

See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
650
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
530
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
170
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
510
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
480

Other Decks in Technology

See All in Technology
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
Avatar for 弁護士ドットコム bengo4com
0
340
OSSで50の競合と戦うためにやったこと
Avatar for yamadashy / やまだし yamadashy
3
990
IoTLT@ストラタシスジャパン_20251021
Avatar for Norippy norioikedo
0
140
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
Avatar for Preferred Networks pfn
PRO
3
860
OPENLOGI Company Profile for engineer
Avatar for OPENLOGI hr01
1
45k
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
Avatar for LayerX layerx
PRO
2
740
OCIjp_Oracle AI World_Recap
Avatar for Shinya Omori shinpy
1
180
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
Avatar for Claire Giordano clairegiordano
0
140
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
Avatar for emi emiki
0
240
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
Avatar for Arthur arthur1
0
260
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
Avatar for Kento Kimura aoto
PRO
1
610
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
Avatar for sh_fk2 sh_fk2
0
220

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
5.9k

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. おわり！ （源柔ゴシック）