今さらの @media print

September 20, 2018

500

今さらの @media print

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip

今さら理解するウェブフォントver.2026

3

660

AI-Slopなデザインを生まないためのデザインプロセス戦略

10

6.2k

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

7

1.7k

Design System Documentation Tooling 2025

3

3.1k

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

1

1.4k

Tools for Design Engineers other than LLM in the LLM era

1

910

Bulletproof Design System with TypeScript

7

5.4k

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

0

320

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

6

1.2k

Other Decks in Technology

See All in Technology

[AWS 秋のクラウドオペレーション祭り 2026]AWS DevOps Agentで変わるリリースと運用対応 ~リリース管理機能と Directed actions のご紹介~

4

1.2k

OpenSharing について熱く語る〜AI アセットの共有について〜

0

260

【Data Engineering Summit2026_登壇資料】医療ビッグデータ×AIエージェントを支えるデータ基盤とハーネスエンジニアリング

jmdc_presentation

0

110

夫婦で子育てするための育児標準化

PRO

0

160

全人類（ほぼ）AWS Organizations の上でAWSを利用している、その世界を知る話

1

130

今こそ知りたいAmplifyGen2

2

160

DevelopersIO 2026 知識の地図を描く ─ オントロジーとは何か？

ishikawa_satoru

1

1.4k

IoTデバイスを繋げるプロトコルMatterをAndroidで使用する方法

0

140

USB PDを使ってスマホを労わりたい

0

160

子育てエンジニアの可処分時間が減っても成長を諦めない戦い方

6

4.4k

3つのアプローチで目指すチームを強くするAI駆動開発

0

150

More Freedom on the Same Shared GPU Cluster: A Small Team’s Experience with vCluster

0

150

Featured

See All Featured

Conquering PDFs: document understanding beyond plain text

PRO

4

3.2k

New Earth Scene 8

4

2.7k

AI in Enterprises - Java and Open Source to the Rescue

0

1.5k

187

17k

Navigating Algorithm Shifts & AI Overviews - #SMXNext

1

1.6k

Designing Dashboards & Data Visualisations in Web Apps

232

55k

The Limits of Empathy - UXLibs8

2

710

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

1

630

Stop Working from a Prison Cell

274

21k

4 Signs Your Business is Dying

187

23k

Skip the Path - Find Your Career Trail

1

250

Thoughts on Productivity

76

5.4k

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