今さらの @media print

September 20, 2018

480

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

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

5

730

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

14

6.6k

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

4

1.6k

早わかり W3C Community Group

0

440

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

0

410

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

2

3.7k

Astroで始める爆速個人サイト開発

15

11k

後悔しないデザインシステムの始め方

4

3.1k

デザインシステム運用とOKRの良い関係

0

2k

Other Decks in Technology

See All in Technology

終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024

28

25k

React Routerで実現する型安全なSPAルーティング

2

420

Opcodeを読んでいたら何故かphp-srcを読んでいた話

0

360

Agentic RAG with LangGraph

0

110

スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.

0

210

20240522 - 躍遷創作理念 @ PicCollage Workshop

0

290

DevFest 2024 Incheon / Songdo - Compose UI 조합 심화

0

240

サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや

2

760

Denoで作るチーム開発生産性向上のためのCLIツール

0

110

UI State設計とテスト方針

4

930

12 Days of OpenAIから読み解く、生成AI 2025年のトレンド

0

960

生成AIをより賢くエンジニアのための RAG入門 - Oracle AI Jam Session #20

4

350

Featured

See All Featured

Building Applications with DynamoDB

92

6.1k

Java REST API Framework Comparison - PWX 2021

28

8.3k

Building an army of robots

302

44k

Site-Speed That Sticks

2

210

For a Future-Friendly Web

176

9.5k

85

9.4k

sergeychernyshev

25

710

Building Flexible Design Systems

yeseniaperezcruz

328

38k

The Art of Delivering Value - GDevCon NA Keynote

8

1.2k

Cheating the UX When There Is Nothing More to Optimize - PixelPioneers

stephaniewalter

280

13k

Documentation Writing (for coders)

67

4.5k

We Have a Design System, Now What?

51

7.3k

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