今さらの @media print

September 20, 2018

500

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

Design System Documentation Tooling 2025

2

1.1k

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

0

810

Tools for Design Engineers other than LLM in the LLM era

1

590

Bulletproof Design System with TypeScript

7

4.5k

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

0

220

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

5

980

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

15

7.6k

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

5

2.1k

早わかり W3C Community Group

0

540

Other Decks in Technology

See All in Technology

品質のための共通認識

PRO

3

260

[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse

0

120

文字列の並び順 / Unicode Collation

3

580

学習データって増やせばいいんですか？

2

330

寫了幾年 Code，然後呢？軟體工程師必須重新認識的 DevOps

1

1.4k

Karate+Database RiderによるAPI自動テスト導入工数をCline＋GitLab MCPを使って2割削減を目指す！ / 20251206 Kazuki Takahashi

PRO

1

750

コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント

PRO

0

1.1k

コミューンのデータ分析AIエージェント「Community Sage」の紹介

0

490

グレートファイアウォールを自宅に建てよう

0

150

re:Inventで気になったサービスを10分でいけるところまでお話しします

1

120

Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers

0

470

今年のデータ・ML系アップデートと気になるアプデのご紹介

1

330

Featured

See All Featured

Fantastic passwords and where to find them - at NoRuKo

52

3.5k

Optimising Largest Contentful Paint

37

3.5k

Statistics for Hackers

799

230k

The Language of Interfaces

162

25k

Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]

10

730

Faster Mobile Websites

310

31k

PRO

31

5.7k

Leading Effective Engineering Teams in the AI Era

8

1.3k

Mobile First: as difficult as doing things right

225

10k

A better future with KSS

240

18k

Embracing the Ebb and Flow

88

4.9k

Exploring the Power of Turbo Streams & Action Cable | RailsConf2023

36

6.2k

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