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

470

Bulletproof Design System with TypeScript

7

4.1k

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

0

170

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

5

930

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

15

7.4k

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

5

2k

早わかり W3C Community Group

0

500

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

0

470

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

2

4k

Other Decks in Technology

See All in Technology

共有と分離 - Compose Multiplatform "本番導入" の設計指針

2

1.2k

Snowflake Intelligenceにはこうやって立ち向かう！クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps

0

280

EncryptedSharedPreferences が deprecated になっちゃった！どうしよう！ / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?

0

490

はじめてのOSS開発からみえたGo言語の強み

4

1k

LLMを搭載したプロダクトの品質保証の模索と学び

1

1.1k

AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)

0

260

サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略

2

470

AIがコード書きすぎ問題にはAIで立ち向かえ

1

360

TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について

1

230

Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn

5

2k

LLM時代のパフォーマンスチューニング：MongoDB運用で試したコンテキスト活用の工夫

0

170

初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜

1

280

Featured

See All Featured

A better future with KSS

239

17k

Building Applications with DynamoDB

96

6.6k

463

140k

Building an army of robots

306

46k

Practical Orchestrator

190

11k

Why Our Code Smells

PRO

339

57k

Building Adaptive Systems

43

2.7k

Testing 201, or: Great Expectations

45

7.7k

VelocityConf: Rendering Performance Case Studies

332

24k

Automating Front-end Workflow

1370

200k

Performance Is Good for Brains [We Love Speed 2024]

12

1.1k

Stop Working from a Prison Cell

271

21k

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