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
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
650
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
250
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
550

Other Decks in Technology

See All in Technology
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
2
300
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
670
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
120
コミュニティが変えるキャリアの地平線：コロナ禍新卒入社のエンジニアがAWSコミュニティで見つけた成長の羅針盤
Avatar for Kento Suzuki kentosuzuki
0
130
Agent Skils
Avatar for ディップ株式会社 dip_tech
PRO
0
130
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
360
pool.ntp.orgに ⾃宅サーバーで 参加してみたら...
Avatar for Fuminori -Tany- Tanizaki(谷崎文義) tanyorg
0
370
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
210
CDK対応したAWS DevOps Agentを試そう_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
380
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
93k
20260208_第66回 コンピュータビジョン勉強会
Avatar for KeiichiIto1978 keiichiito1978
0
190
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
200

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
500
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
66
37k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
200
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
310
Tell your own story through comics
Avatar for letsgokoyo letsgokoyo
1
810
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
49
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k

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