今さらの @media print

September 20, 2018

500

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

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

3

680

Design System Documentation Tooling 2025

3

2.5k

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

1

980

Tools for Design Engineers other than LLM in the LLM era

1

690

Bulletproof Design System with TypeScript

7

4.9k

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

0

270

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

5

1k

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

15

7.8k

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

5

2.2k

Other Decks in Technology

See All in Technology

開発チームとQAエンジニアの新しい協業モデル -年末調整開発チームで実践する【QAリード施策】-

0

360

SSoT（Single Source of Truth）で「壊して再生」する設計

2

380

AIエージェント時代に必要なオペレーションマネージャーのロールとは

0

160

【社内勉強会】新年度からコーディングエージェントを使いこなす - 構造と制約で引き出すClaude Codeの実践知

27

13k

AI時代のシステム開発者の仕事_20260328

0

290

データマネジメント戦略Night - 4社のリアルを語る会

1

410

Phase03_ドキュメント管理

0

2.8k

「通るまでRe-run」から卒業！落ちないテストを書く勘所

2

770

君はジョシュアツリーを知っているか？名前をつけて事象を正しく認識しよう / Do you know Joshua Tree?

4

140

Astro Islandsの内部実装を「日本で一番わかりやすく」ざっくり解説！

0

300

ThetaOS - A Mythical Machine comes Alive

0

200

AgentCoreとLINEを使った飲食店おすすめアプリを作ってみた

2

260

Featured

See All Featured

New Earth Scene 8

1

1.8k

Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure

49

9.9k

WENDY [Excerpt]

9

37k

JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022

1

400

Agile that works and the tools we love

331

21k

Money Talks: Using Revenue to Get Sh*t Done

0

190

Groundhog Day: Seeking Process in Gaming for Health

0

130

The World Runs on Bad Software

PRO

72

12k

技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition

PRO

118

110k

The Illustrated Guide to Node.js - THAT Conference 2024

1

320

Into the Great Unknown - MozCon

40

2.3k

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

52

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