今さらの @media print

September 20, 2018

490

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

Tools for Design Engineers other than LLM in the LLM era

1

130

Bulletproof Design System with TypeScript

6

3.4k

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

0

140

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

5

890

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

14

7.2k

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

4

2k

早わかり W3C Community Group

0

490

Ubieとアクセシビリティのこれからを考える

0

460

2023年版デザインシステム技術選定の勘所 - フロントエンドカンファレンス沖縄

2

3.9k

Other Decks in Technology

See All in Technology

ObsidianをMCP連携させてみる

2

140

AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions

matsuihidetoshi

1

150

GeminiとNotebookLMによる金融実務の業務革新

0

170

AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches

4

520

あなたの声を届けよう！女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice

1

180

AIの最新技術＆テーマをつまんで紹介＆フリートークするシリーズ #1 量子機械学習の入門

0

130

AI技術トレンド勉強会 #1MCPの基礎と実務での応用

1

250

ユーザーのプロフィールデータを活用した推薦精度向上の取り組み

0

490

Clineを含めたAIエージェントを大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization

4

1.4k

【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術

0

900

25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全

9

2.2k

Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11

0

730

Featured

See All Featured

CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again

161

15k

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

productmarketing

22

3.5k

Product Roadmaps are Hard

53

11k

The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024

26

2.8k

Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure

46

9.6k

GraphQLとの向き合い方2022年版

46

14k

Code Reviewing Like a Champion

524

40k

4 Signs Your Business is Dying

184

22k

YesSQL, Process and Tooling at Scale

173

14k

Understanding Cognitive Biases in Performance Measurement

29

1.8k

XXLCSS - How to scale CSS and keep your sanity

248

1.3M

Easily Structure & Communicate Ideas using Wireframe

194

16k

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