今さらの @media print

September 20, 2018

500

今さらの @media print

takanorip

September 20, 2018

More Decks by takanorip

See All by takanorip

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

10

6k

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

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

900

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

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

27

17k

AI coding 整合正規方法

0

550

AI 時代のスタートアップエコシステ厶から考究する技術的負債との向き合い方

PRO

3

2.7k

AIエージェントの一手は誰も見ていない - Falco拡張OSS「Prempti」とeBPFでサーバーレス実行基盤を二層防御する

1

570

地方移住と都心キャリアの両立は「金・時間・人」のリソースをフル活用すれば実現できる！〜Snowflake女子会 vol.8

0

110

The Knowledge Spine: A Machine-Executable Ontology for Governed Marketing Activation

0

130

GitHub Agentic Workflows を触ってみる

2

150

EventBridge に「合流」はない ― サーバーレスのワークフローを育てるということ / No Join in EventBridge

2

540

現場で役立つ技術負債の効果的な返済方法

PRO

11

5.2k

Kiro Meetup #8 Kiro アップデート (2026/3/21〜2026/9/24)

1

200

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

PRO

2

2.3k

バイブコーディング時代のWebアプリ開発入門~Cloud Runで学ぶセキュアなビルドとデプロイ

1

150

Featured

See All Featured

Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)

1

410

The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs

PRO

3

3.7k

Typedesign – Prime Four

42

3.2k

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

1

390

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

3

3.8k

Raft: Consensus for Rubyists

142

7.7k

The Invisible Side of Design

301

52k

Introduction to Domain-Driven Design and Collaborative software design

1

1k

Leveraging Curiosity to Care for An Aging Population

1

520

Code Review Best Practice

74

20k

Building Better People: How to give real-time feedback that sticks.

370

20k

Intergalactic Javascript Robots from Outer Space

273

27k

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