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

今さらの @media print

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
3
750
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
720
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.9k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
280
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.2k

Other Decks in Technology

See All in Technology
[最強DB講義]推薦システム | 基礎編
Avatar for RecSysLab recsyslab
PRO
1
170
AIが書いたコードを信じられない問題 〜レビュー負荷を下げるために変えたこと〜 / The AI Code Trust Gap: Reducing the Review Burden
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
7
1.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
6
74k
AgentCore×VPCでの設計パターンn選と勘所
Avatar for Har1101 har1101
3
280
MLOps導入のための組織作りの第一歩
Avatar for Daisuke Akagawa (Akasan) akasan
0
330
Revisiting [CLS] and Patch Token Interaction in Vision Transformers
Avatar for yu4u yu4u
0
360
EarthCopilotに学ぶマルチエージェントオーケストレーション
Avatar for なかしょ nakasho
0
300
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
Avatar for Kenji Saito ks91
PRO
0
320
データを"持てない"環境でのアノテーション基盤設計
Avatar for SansanTech sansantech
PRO
1
120
レビューしきれない？それは「全て人力でのレビュー」だからではないでしょうか
Avatar for amixedcolor amixedcolor
0
330
AIはハッカーを減らすのか、増やすのか？──現役ホワイトハッカーから見るAI時代のリアル【MEGU-Meet】
Avatar for サイバーセキュリティクラウド cscengineer
0
160
AI時代における技術的負債への取り組み
Avatar for Tadashi Shigeoka codenote
1
1.5k

Featured

See All Featured
Design in an AI World
Avatar for tapps tapps
1
200
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.7k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
100
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.8k
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
303
52k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
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. おわり！ （源柔ゴシック）