今さらの @media print

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip

AI-Slopなデザインを生まないためのデザインプロセス戦略

10

5.9k

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

7

1.6k

Design System Documentation Tooling 2025

3

3k

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

1

1.3k

Tools for Design Engineers other than LLM in the LLM era

1

880

Bulletproof Design System with TypeScript

7

5.4k

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

0

320

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

6

1.2k

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

15

8k

Other Decks in Technology

See All in Technology

事業課題から技術的負債に向き合う

PRO

2

530

日経電子版を支えていく Kasane Design System/fec_fukuoka

nikkei_engineer_recruiting

0

1.2k

AIエージェントの自己改善をどう設計するか / How to Design Self-Improvement for AI Agents

20

11k

すぐできる衛星通信対応あとは山奥に行くだけ

0

110

10Xに技術的負債をもたらした「2つの境界の歪み」その構造と解消への営み

0

700

2026-09-11 【Snowflake World Tour Tokyo 2026】Snowflakeを起点に、AI Agentが自律稼働し続ける未来へ / Driving AI Agents with Snowflake

0

380

#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~

0

150

越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon

0

130

ペアプロの価値はコードを書くことだけじゃない

PRO

0

210

AI時代、データエンジニアが一番おもろい

0

440

Deployment の先にある AI Agent 基盤 - kagent vNext、Agent Substrate、Hermes から読み解く Agent Runtime の現在地 / k8s-matsuri-2-ai-agent-platform-amsy810

3

290

アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App

1

770

Featured

See All Featured

<Decoding/> the Language of Devs - We Love SEO 2024

1

320

What’s in a name? Adding method to the madness

productmarketing

PRO

24

4.2k

Creating an realtime collaboration tool: Agile Flush - .NET Oxford

35

2.6k

We Are The Robots

0

370

Jess Joyce - The Pitfalls of Following Frameworks

PRO

1

410

The Impact of AI in SEO - AI Overviews June 2024 Edition

6

1.2k

Embracing the Ebb and Flow

88

5.2k

89

10k

Large-scale JavaScript Application Architecture

515

110k

43

4k

Leveraging Curiosity to Care for An Aging Population

1

490

Making Projects Easy

120

6.7k

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