今さらの @media print

September 20, 2018

480

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

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

0

100

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

5

790

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

14

6.9k

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

4

1.8k

早わかり W3C Community Group

0

460

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

0

420

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

2

3.8k

Astroで始める爆速個人サイト開発

15

11k

後悔しないデザインシステムの始め方

4

3.1k

Other Decks in Technology

See All in Technology

サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS

7

1.8k

Snowflakeの開発・運用コストをApache Icebergで効率化しよう！～機能と活用例のご紹介～

1

520

Platform Engineeringでクラウドの「楽しくない」を解消しよう

4

190

LINEギフトにおけるバックエンド開発

0

400

データエンジニアリング領域におけるDuckDBのユースケース

9

2.5k

MIMEと文字コードの闇

2

1.5k

"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"

1

230

マーケットプレイス版Oracle WebCenter Content For OCI

oracle4engineer

3

540

Aurora PostgreSQLがCloudWatch Logsに出力するログの課金を削減してみる #jawsdays2025

1

240

どちらかだけじゃもったいないかも？ ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について

2

260

JavaにおけるNull非許容性

2

2.7k

【詳説】コンテンツ配信システムの複数機能基盤への拡張

0

290

Featured

See All Featured

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

47

5.2k

The Web Performance Landscape in 2024 [PerfNow 2024]

4

440

Why Our Code Smells

336

57k

29

14k

35

3.2k

Practical Orchestrator

186

10k

Building an army of robots

303

45k

Designing on Purpose - Digital PM Summit 2013

117

7.1k

Stop Working from a Prison Cell

268

20k

A Philosophy of Restraint

203

16k

Unsuck your backbone

669

57k

A better future with KSS

238

17k

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