$30 off During Our Annual Pro Sale. View Details »

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

Other Decks in Technology

See All in Technology
まだ間に合う！ Agentic AI on AWSの現在地をやさしく一挙おさらい
Avatar for みのるん minorun365
17
2.8k
Strands AgentsとNova 2 SonicでS2Sを実践してみた
Avatar for Yuuki Yamashita yama3133
1
1.9k
普段使ってるClaude Skillsの紹介(by Notebooklm)
Avatar for Higuchi kokoro zerebom
8
2.2k
AI駆動開発ライフサイクル（AI-DLC）の始め方
Avatar for ryansbcho79 ryansbcho79
0
190
"人"が頑張るAI駆動開発
Avatar for yoko yokomachi
1
490
Amazon Connect アップデート！ AIエージェントにMCPツールを設定してみた！
Avatar for Yosuke Suzuki ysuzuki
0
140
Oracle Database@Google Cloud：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
1
770
NIKKEI Tech Talk #41: セキュア・バイ・デザインからクラウド管理を考える
Avatar for Ryosuke Sekido sekido
PRO
0
210
アラフォーおじさん、はじめてre:Inventに行く / A 40-Something Guy’s First re:Invent Adventure
Avatar for 株式会社カミナシ kaminashi
0
150
意外と知らない状態遷移テストの世界
Avatar for nihonbuson nihonbuson
PRO
1
260
Strands Agents × インタリーブ思考 で変わるAIエージェント設計 / Strands Agents x Interleaved Thinking AI Agents
Avatar for Takanori Suzuki takanorig
5
2.1k
子育てで想像してなかった「見えないダメージ」 / Unforeseen "hidden burdens" of raising children.
Avatar for Pauli pauli
2
330

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
580
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
28
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
150
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
45
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
57
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
1.9k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
120
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.7k

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