今さらの @media print

September 20, 2018

500

今さらの @media print

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip

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

3

790

Design System Documentation Tooling 2025

3

2.6k

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

1

1k

Tools for Design Engineers other than LLM in the LLM era

1

730

Bulletproof Design System with TypeScript

7

5k

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

0

280

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

6

1.1k

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

15

7.8k

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

5

2.2k

Other Decks in Technology

See All in Technology

ブラウザの投機的読み込みと投機ルールAPIを理解し、Webサービスのパフォーマンスを最適化する

3

310

Oracle AI Database@AWS：サービス概要のご紹介

oracle4engineer

PRO

4

2.5k

Purview 勉強会報告 Microsoft Purview 入門しようとしてみた

1

390

"うちにはまだ早い"は本当？ ─ 小さく始めるPlatform Engineering入門

6

540

自動テストだけで リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases

7

3.7k

会社説明資料｜株式会社ギークプラスソフトウェア事業部

0

220

Swift Sequence の便利 API 再発見

1

270

「強制アップデート」か「チームの自律」か？エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations

0

190

OWASP APTSを眺めてみた

0

130

「背中を見て育て」からの卒業〜専門技術としてのテスト設計を軸に、品質保証のバトンを繋ぐ〜 #genda_tech_talk

PRO

3

1.3k

AIエージェントの支払い基盤　AgentCore Payments概要

2

180

カオナビに Suspenseを導入するまで / The Road to Suspense at kaonavi

1

450

Featured

See All Featured

The Art of Delivering Value - GDevCon NA Keynote

16

1.9k

SEO for Brand Visibility & Recognition

0

4.5k

Raft: Consensus for Rubyists

141

7.4k

The browser strikes back

0

1k

Visual Storytelling: How to be a Superhuman Communicator

2

530

VelocityConf: Rendering Performance Case Studies

333

25k

The Pragmatic Product Professional

37

7.3k

Primal Persuasion: How to Engage the Brain for Learning That Lasts

0

340

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

128

55k

職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position

62

54k

DevOps and Value Stream Thinking: Enabling flow, efficiency and business value

1

190

Exploring the relationship between traditional SERPs and Gen AI search

raygrieselhuber

PRO

2

3.9k

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