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

今さらの @media print

Avatar for takanorip takanorip
September 20, 2018
Technology
2
490

今さらの @media print

Avatar for takanorip

takanorip

September 20, 2018
Tweet

More Decks by takanorip

See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
460
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
160
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
500
Ubieとアクセシビリティのこれからを考える
Avatar for takanorip takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
Avatar for takanorip takanorip
2
4k

Other Decks in Technology

See All in Technology
LLMを搭載したプロダクトの品質保証の模索と学び
Avatar for SmartHR 品質保証部 qa
0
1.1k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
280
Rustから学ぶ 非同期処理の仕組み
Avatar for skanehira skanehira
1
140
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
0
1.3k
2つのフロントエンドと状態管理
Avatar for MIXI ENGINEERS mixi_engineers
PRO
3
110
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
Avatar for oracle4engineer oracle4engineer
PRO
0
140
2025年夏 コーディングエージェントを統べる者
Avatar for nwiizo nwiizo
0
170
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
120
新アイテムをどう使っていくか？みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
Avatar for Akira Ouchi akkiesoft
0
260
dbt開発 with Claude Codeのためのガードレール設計
Avatar for 10xinc 10xinc
2
1.2k
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
Avatar for Logy nologyance
1
390
Agile PBL at New Grads Trainings
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
430

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
810
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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