今さらの @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

420

Bulletproof Design System with TypeScript

6

3.9k

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

0

160

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

5

920

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

14

7.4k

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

4

2k

早わかり W3C Community Group

0

500

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

0

470

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

2

4k

Other Decks in Technology

See All in Technology

MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents

5

2.5k

React Server ComponentsでAPI不要の開発体験

PRO

0

330

JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話

0

110

AI関数が早くなったので試してみよう

0

320

GISエンジニアよ現場に行け！

1

130

Cloud WANの基礎から応用～少しだけDeep Dive～

3

110

AWSの最新サービスでAIエージェント構築に楽しく入門しよう

PRO

6

150

夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio

0

250

専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor

2

1.4k

テストを実行してSorbetのsigを書こう！

PRO

1

130

アカデミーキャンプ 2025 SuuuuuuMMeR「燃えろ!!ロボコン」 / Academy Camp 2025 SuuuuuuMMeR "Burn the Spirit, Robocon!!" DAY 1

PRO

0

150

はじめての転職講座/The Guide of First Career Change

5

4.3k

Featured

See All Featured

The Illustrated Children's Guide to Kubernetes

48

50k

Producing Creativity

PRO

347

40k

4 Signs Your Business is Dying

184

22k

Building Applications with DynamoDB

96

6.5k

ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020

126

53k

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

stephaniewalter

283

13k

Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure

47

9.6k

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

507

140k

How to Create Impact in a Changing Tech Landscape [PerfNow 2023]

53

2.9k

The Cost Of JavaScript in 2023

53

8.8k

Rebuilding a faster, lazier Slack

83

9.1k

Docker and Python

45

3.5k

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