今さらの @media print

September 20, 2018

490

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

Tools for Design Engineers other than LLM in the LLM era

1

130

Bulletproof Design System with TypeScript

6

3.5k

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

0

140

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

5

890

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

14

7.2k

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

4

2k

早わかり W3C Community Group

0

490

Ubieとアクセシビリティのこれからを考える

0

460

2023年版デザインシステム技術選定の勘所 - フロントエンドカンファレンス沖縄

2

3.9k

Other Decks in Technology

See All in Technology

解析の定理証明実践＠Lean 4

0

180

なぜ私はいま、ここにいるのか？ #もがく中堅デザイナー #プロダクトデザイナー

0

470

Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1

0

120

Agentic Workflowという選択肢を考える

1

530

地図も、未来も、オープンに。〜OSGeo.JPとFOSS4Gのご紹介〜

0

110

AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions

matsuihidetoshi

1

280

25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy

9

1.2k

SalesforceArchitectGroupOsaka#20_CNX'25_Report

0

180

「良さそう」と「とても良い」の間には「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night

1

180

強化されたAmazon Location Serviceによる新機能と開発者体験

2

210

BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説

1

170

M3 Expressiveの思想に迫る

0

110

Featured

See All Featured

Design and Strategy: How to Deal with People Who Don’t "Get" Design

130

19k

How to train your dragon (web standard)

94

6.1k

Let's Do A Bunch of Simple Stuff to Make Websites Faster

507

140k

Fashionably flexible responsive web design (full day workshop)

407

66k

It's Worth the Effort

185

28k

455

42k

GraphQLとの向き合い方2022年版

48

14k

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

17

940

Art, The Web, and Tiny UX

299

21k

Thoughts on Productivity

69

4.7k

[RailsConf 2023] Rails as a piece of cake

55

5.6k

Learning to Love Humans: Emotional Interface Design

273

40k

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