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

今さらの @media print

Avatar for takanorip takanorip
September 20, 2018
Technology
500
2

今さらの @media print

Avatar for takanorip

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
7
5.4k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.4k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.9k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.3k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
830
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.3k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
310
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k

Other Decks in Technology

See All in Technology
QAエンジニア起点で進める、SmartHRにおける信頼性向上について
Avatar for kaomi kaomi_wombat
1
140
修正PRを食べてレビュースキルが賢くなる：Claude Codeによる自己改善サイクル
Avatar for um(うめ) yuyaumetsu
6
1.5k
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1.2k
Sets in Go
Avatar for Luciano Ramalho ramalho
1
820
ソフトウェアサプライチェーンの構造的リスクとコンテナ環境の保護
Avatar for Kyohei Mizumoto kyohmizu
3
220
ホームラボ紹介
Avatar for 世良泰明 y_sera15
0
180
SO-101×VLAによる3色キューブのピック＆プレース
Avatar for ABEJA abeja
0
210
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
Avatar for NTT docomo Business nttcom
1
6.1k
サイバー捜査員研修（後半）
Avatar for Nomizo Nomizo nomizone
1
890
Kiro Crew入門 - 常駐エージェントの仕組みと使いどころ / Intro to Kiro Crew
Avatar for Kazuki Adachi k_adachi_01
1
150
ブラウザ研修 2026
Avatar for Recruit recruitengineers
PRO
6
1k
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k

Featured

See All Featured
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
170
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.6k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
200
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.3k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
470

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