Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

今さらの @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
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
880
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
10
6.3k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
7
1.8k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
3.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.4k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
920
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
320
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.2k

Other Decks in Technology

See All in Technology
『SAR衛星データ解析入門』の ご紹介とその応用
Avatar for じゃらしまる syuchimu
0
120
⾮構造化データを価値に変える AI エージェント基盤とその組織
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
190
1つのリクエストを追って理解する - llm-dのP/D分離
Avatar for akhino akhino
1
160
触りたくないデータに、どう触るか AI時代のRBACアクセスガバナンス
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
270
Persisting Massive Data with Rails ~Designing for 60 billion rows, and fighting the bottlenecks~ Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
Avatar for Shoichi Ochi occhi
0
730
Code for Security プロジェクト紹介 2026年10月
Avatar for Yuki Kawabe yu23ki14
0
110
スキマバイトという雇用形態は存在しないので、雇用期間1日のアルバイト契約を事業者とワーカーが結ぶ手続きを支えるのがタイミーなんです
Avatar for しが あきとし(akitoshiga) akitoshiga
0
200
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
Avatar for koukihosaka koukihosaka
1
350
Classmethod Company Deck
Avatar for Satoshi7 satoshi7
1
710
DWH の限界突破！ AI エージェント向け爆速リアルタイムデータ基盤 ClickHouse
Avatar for jozono jozono
1
480
事業成長とデータ活用を止めないためのマネジメントへ挑戦
Avatar for Noriaki Hiraki hiracky16
0
400
しろおびから始める！ログ活用の第一歩
Avatar for Shumei Ito shumei_ito
0
950

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
560
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Visualization
Avatar for Eitan Lees eitanlees
153
17k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.4k
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
570
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
Between Models and Reality
Avatar for mayunak mayunak
4
500
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k

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