今さらの @media print

September 20, 2018

500

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

Design System Documentation Tooling 2025

3

1.8k

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

0

840

Tools for Design Engineers other than LLM in the LLM era

1

600

Bulletproof Design System with TypeScript

7

4.5k

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

0

220

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

5

990

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

15

7.6k

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

5

2.1k

早わかり W3C Community Group

0

540

Other Decks in Technology

See All in Technology

半年で、AIゼロ知識から AI中心開発組織の変革担当に至るまで

0

150

Microsoft Agent Frameworkの可観測性

1

120

日本Rubyの会: これまでとこれから

PRO

6

250

ESXi のAIOps だ！2025冬

0

390

TED_modeki_共創ラボ_20251203.pdf

0

150

さくらのクラウド開発ふりかえり2025

2

1.2k

SREが取り組むデプロイ高速化 ─ Docker Buildを最適化した話

0

150

Amazon Quick Suite で始める手軽な AI エージェント

2

1.9k

ハッカソンから社内プロダクトへ AIエージェント「ko☆shi」開発で学んだ4つの重要要素

6

1.7k

Bedrock AgentCore Evaluationsで学ぶLLM as a judge入門

2

270

20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI

0

720

たまに起きる外部サービスの障害に備えたり備えなかったりする話

0

420

Featured

See All Featured

Principles of Awesome APIs and How to Build Them.

127

17k

Design and Strategy: How to Deal with People Who Don’t "Get" Design

132

19k

Save Time (by Creating Custom Rails Generators)

PRO

32

1.9k

Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024

1

1.7k

Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]

10

760

Introduction to Domain-Driven Design and Collaborative software design

1

520

New Earth Scene 8

0

1.2k

Neural Spatial Audio Processing for Sound Field Analysis and Control

0

130

ラッコキーワードサービス紹介資料

0

1.8M

Evolving SEO for Evolving Search Engines

0

77

SEO in 2025: How to Prepare for the Future of Search

3

3.3k

Designing for Performance

610

69k

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