今さらの @media print

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip

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

4

1.1k

Design System Documentation Tooling 2025

3

2.8k

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

1

1.1k

Tools for Design Engineers other than LLM in the LLM era

1

790

Bulletproof Design System with TypeScript

7

5.2k

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

0

300

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

6

1.1k

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

15

7.9k

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

5

2.3k

Other Decks in Technology

See All in Technology

ADDF - ループエンジニアリングするフレームワークを作ったら/I Didn't Set Out to Build Loop Engineering, But ADDF Did

0

120

Foxgloveについて実際にExtensionを開発して公開するまでの話 / About Foxglove: The Story of Developing and Releasing an Extension

0

230

“それは自分の仕事じゃない"を越えて行け

0

270

誤解だらけの開発生産性 / Myths and Misconceptions about Developer Productivity

1

250

AI時代のエンジニアキャリアについて今一度考える

2

1.5k

0

1.9k

Road to SRE NEXTの今までとこれから

0

310

「ちゃんとやっている」は独りよがりだった ― 不安に寄り添うインシデント対応へ / Towards incident response that addresses anxieties

1

5.2k

SREとQA　二人三脚で進めるSLO運用/sre-qa-slo

0

550

AIと共生する開発者プラットフォーム：バクラクのモノレポ×マイクロサービス基盤

2

3.5k

実装だけじゃない！ CCA-F取得エンジニアが教えるClaude Code開発プロセス活用術

2

710

「最後に責任を取るのはチーム」— 人間のPRレビューを最小化してアップデートしたメンタルモデル

jnishime_dresscode

0

630

Featured

See All Featured

Lightning Talk: Beautiful Slides for Beginners

PRO

2

600

Impact Scores and Hybrid Strategies: The future of link building

tamaranovitovic

0

330

PRO

2

730

The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)

PRO

0

380

Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO

PRO

0

210

Google's AI Overviews - The New Search

0

1.1k

How to Grow Your eCommerce with AI & Automation

PRO

1

220

Building Applications with DynamoDB

96

7.1k

Why You Should Never Use an ORM

PRO

61

9.9k

Tips & Tricks on How to Get Your First Job In Tech

1

560

GraphQLとの向き合い方2022年版

50

15k

The Cost Of JavaScript in 2023

55

10k

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