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

今さらの @media print

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
650
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
970
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
680
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.8k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
260
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.2k

Other Decks in Technology

See All in Technology
2026年もソフトウェアサプライチェーンのリスクに立ち向かうために / Product Security Square #3
Avatar for GMO Flatt Security flatt_security
1
610
頼れる Agentic AI を支える Datadog のオブザーバビリティ / Powering Reliable Agentic AI with Datadog Observability
Avatar for Kento Kimura aoto
PRO
0
190
フロントエンド刷新 4年間の軌跡
Avatar for nus3 yotahada3
0
480
Scrumは歪む — 組織設計の原理原則
Avatar for Daisuke Ashihara dashi
0
200
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
OpenClaw を Amazon Lightsail で動かす理由
Avatar for Uechi Shingo uechishingo
0
150
ガバメントクラウドにおけるAWSの長期継続割引について
Avatar for takeda_h takeda_h
2
750
1GB RAMのラズピッピで何ができるのか試してみよう / 20260319-rpijam-1gb-rpi-whats-possible
Avatar for Akira Ouchi akkiesoft
0
110
JAWS DAYS 2026 ExaWizards_20260307
Avatar for ExaWizards exawizards
0
440
情シスのための生成AI実践ガイド2026 / Generative AI Practical Guide for Business Technology 2026
Avatar for Akira Maeda glidenote
0
270
Sansanでの認証基盤内製化と移行
Avatar for SansanTech sansantech
PRO
0
530
S3はフラットである –AWS公式SDKにも存在した、 署名付きURLにおけるパストラバーサル脆弱性– / JAWS DAYS 2026
Avatar for GMO Flatt Security flatt_security
0
1.8k

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.3k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
180
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
130
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
77
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
199
73k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.7M
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
67
37k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
220
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k

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