今さらの @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

2.3k

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

1

900

Tools for Design Engineers other than LLM in the LLM era

1

650

Bulletproof Design System with TypeScript

7

4.7k

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

0

250

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

5

1k

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

15

7.7k

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

5

2.2k

早わかり W3C Community Group

0

550

Other Decks in Technology

See All in Technology

広告の効果検証を題材にした因果推論の精度検証について

PRO

0

210

小さく始めるBCP ― 多プロダクト環境で始める最初の一歩

1

550

ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立

1

1.6k

今こそ学びたいKubernetesネットワーク～CNIが繋ぐNWとプラットフォームの「フラッと」な対話

3

300

OpenShiftでllm-dを動かそう！

0

140

AWS Network Firewall Proxyを触ってみた

1

240

量子クラウドサービスの裏側　〜Deep Dive into OQTOPUS〜

0

140

生成AIを活用した音声文字起こしシステムの2つの構築パターンについて

PRO

3

220

Tebiki Engineering Team Deck

0

24k

StrandsとNeptuneを使ってナレッジグラフを構築する

1

120

~Everything as Codeを諦めない~ 後からCDK

3

470

Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介

3

180

Featured

See All Featured

PRO

0

46k

Everyday Curiosity

0

130

The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)

PRO

0

240

Crafting Experiences

1

50

A brief & incomplete history of  UX Design for the World Wide Web: 1989–2019

1

300

So, you think you're a good person

PRO

2

1.9k

State of Search Keynote: SEO is Dead Long Live SEO

0

120

Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa

PRO

1

55

The Web Performance Landscape in 2024 [PerfNow 2024]

12

1k

Between Models and Reality

1

190

Mozcon NYC 2025: Stop Losing SEO Traffic

0

140

The Art of Programming - Codeland 2020

57

14k

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