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

今さらの @media print

Avatar for takanorip takanorip
September 20, 2018
Technology
2
500

今さらの @media print

Avatar for takanorip

takanorip

September 20, 2018
Tweet

More Decks by takanorip

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

Other Decks in Technology

See All in Technology
重厚長大企業で、顧客価値をスケールさせるためのプロダクトづくりとプロダクト開発チームづくりの裏側 / Developers X Summit 2025
Avatar for モンゴル (mongolyy) mongolyy
0
160
ステートレスなLLMでステートフルなAI agentを作る - YAPC::Fukuoka 2025
Avatar for FUJI Goro gfx
8
1.4k
Greenは本当にGreenか？ - B/GデプロイとAPI自動テストで安心デプロイ
Avatar for Kaz Watanabe kaz29
0
120
やり方は一つだけじゃない、正解だけを目指さず寄り道やその先まで自分流に楽しむ趣味プログラミングの探求 2025-11-15 YAPC::Fukuoka
Avatar for すぎゃーん sugyan
3
920
明日から真似してOk！NOT A HOTELで実践している入社手続きの自動化
Avatar for kajinari nkajihara
1
870
Rubyist入門: The Way to The Timeless Way of Programming
Avatar for Koji SHIMADA snoozer05
PRO
7
540
現地速報！Microsoft Ignite 2025 M365 Copilotアップデートレポート
Avatar for Kaz Asada | しがない情シス kasada
2
1.5k
LINEスキマニ/LINEバイトにおけるバックエンド開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
350
AI駆動開発を実現するためのアーキテクチャと取り組み
Avatar for Yuichiro Yamashita baseballyama
13
9.4k
AI × クラウドで シイタケの収穫時期を判定してみた
Avatar for Lamaglama39 lamaglama39
1
380
Redux → Recoil → Zustand → useSyncExternalStore： 状態管理の10年とReact本来の姿
Avatar for ZOZO Developers zozotech
PRO
21
8.9k
雲勉LT_Amazon Bedrock AgentCoreを知りAIエージェントに入門しよう！
Avatar for y-mae ymae
2
190

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
57
6.1k

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