今さらの @media print

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip

「見せる」登壇資料デザインの極意

3

990

Design System Documentation Tooling 2025

3

2.7k

デザインエンジニアの延長にデザインマネージャーとしての可能性を探る

1

1.1k

Tools for Design Engineers other than LLM in the LLM era

1

770

Bulletproof Design System with TypeScript

7

5.2k

Eleventy3.0 で始める爆速個人ブログ開発！

0

290

Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説

6

1.1k

効果的な管理画面をデザインをするために避けるべき5つの罠

15

7.8k

社内管理画面のデザインもプロダクトデザイン

5

2.3k

Other Decks in Technology

See All in Technology

就職⽀援サービスにおけるキャリアアドバイザーのシフトスケジューリング

recruitengineers

PRO

1

120

Claude Code×Terraform IaC テンプレート駆動開発

1

470

「嘘をつくテスト」の失敗例から学ぶ良いテストコード #frontend_phpcon_do

0

610

Socrates × Looker　〜セマンティックレイヤーで進化するデータ分析エージェント〜

3

1.9k

Reliability in the Age of AI: Engineering for AI Velocity

0

120

2026TECHFRESH畢業分享會 - Lightning Talk - 資料也要 CI/CD? 用 Airbyte 自動化資料同步

line_developers_tw

PRO

0

420

「エンジニア進化論」2028年の開発完全自動化、エンジニアはどう進化するか

cyberagentdevelopers

PRO

4

2.6k

2026 TECHFRESH 畢業分享會 - AI-Native 重塑軟體工程與虛擬講師

line_developers_tw

PRO

0

430

機械学習を「社会実装」するということ 2026年夏版 / Social Implementation of Machine Learning June 2026 Version

3

920

エンジニアリング戦略の作り方 / Crafting Engineering Strategy

18

6k

脆弱性対応、どこで線を引くか

0

240

2026 TECHFRESH 畢業分享會 - 開發日常大解密！從領域驅動到企業級上線

line_developers_tw

PRO

0

420

Featured

See All Featured

Navigating Weather and Climate Data

0

210

AI: The stuff that nobody shows you

PRO

8

700

Agile Actions for Facilitating Distributed Teams - ADO2019

0

200

Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge

0

310

Un-Boring Meetings

0

310

Avoiding the “Bad Training, Faster” Trap in the Age of AI

0

170

Crafting Experiences

1

170

Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa

PRO

1

140

Easily Structure & Communicate Ideas using Wireframe

194

17k

Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes

2

430

How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today

1

210

JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022

1

460

Transcript

今さらの @media print Takanori Oki @megro.css
自己紹介 • Takanori Oki (@takanorip) • Frontend Developer • Nuxt.js
/ Vue.js / Polymer / Web Components • フォントが好きです • 技術書典5の執筆忙しい
今日は「印刷用CSS」の話をします
みなさん印刷用のCSSって書いてますか？
@media printで定義
None
@page
None
None
Safari以外ならだいたい使える
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
background-color
印刷時には背景色全て無視されるので背景色がなくても大丈夫なようにCSSをあてる
ブラウザの設定をいじればできるけど、それをユーザーに強いるのは微妙
Chromeだけ回避策がある
None
page-break系CSS
要素の中や前後の改行を操作するプロパティ
None
注意点：横並びになってる要素には効かない
tableの子要素 flexboxの子要素 inline-block float
印刷時は横並びを解除する必要がある
横長tableは印刷できないので印刷時だけ分割するとかする
良い印刷CSSライフを！
おわり！（源柔ゴシック）