今さらの @media print

September 20, 2018

490

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

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

0

580

Tools for Design Engineers other than LLM in the LLM era

1

530

Bulletproof Design System with TypeScript

7

4.2k

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

0

170

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

5

950

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

15

7.5k

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

5

2.1k

早わかり W3C Community Group

0

510

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

0

480

Other Decks in Technology

See All in Technology

大規模サーバーレスAPIの堅牢性・信頼性設計〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜

10

5k

速習AGENTS.md：5分で精度を上げる "３ブロック" テンプレ

6

1.8k

現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI

0

180

20251014_Pythonを実務で徹底的に使いこなした話

0

210

いまからでも遅くない！SSL/TLS証明書超入門（It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide）

0

270

物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025

0

230

やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self

1

520

Introduction to Sansan Meishi Maker Development Engineer

PRO

0

310

Data Hubグループ紹介資料

PRO

0

2.2k

LLMプロダクトの信頼性を上げるには？LLM Observabilityによる、対話型音声AIアプリケーションの安定運用

ivry_presentationmaterials

0

430

AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-

kenichirokimura

3

350

AWSでAgentic AIを開発するための前提知識の整理

2

190

Featured

See All Featured

455

43k

The Power of CSS Pseudo Elements

79

6k

実際に使うSQLの書き方徹底解説 / pgcon21j-tutorial

PRO

190

55k

The Art of Programming - Codeland 2020

56

14k

Build The Right Thing And Hit Your Dates

37

2.9k

Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End

253

22k

JavaScript: Past, Present, and Future - NDC Porto 2020

52

5.6k

A designer walks into a library…

pauljervisheath

209

24k

Sharpening the Axe: The Primacy of Toolmaking

46

2.5k

Improving Core Web Vitals using Speculation Rules API

sergeychernyshev

21

1.2k

The MySQL Ecosystem @ GitHub 2015

251

13k

Put a Button on it: Removing Barriers to Going Fast.

60

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