今さらの @media print

September 20, 2018

480

今さらの @media print

takanorip

September 20, 2018

Tweet

More Decks by takanorip

See All by takanorip

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

0

100

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

5

780

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

14

6.9k

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

4

1.8k

早わかり W3C Community Group

0

460

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

0

420

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

2

3.8k

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

15

11k

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

4

3.1k

Other Decks in Technology

See All in Technology

株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck

3

11k

OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化

0

650

クラウド関連のインシデントケースを収集して見えてきたもの

8

1.2k

偏光画像処理ライブラリを作った話

1

170

Охота на косуль у древних

0

110

LINEギフトにおけるバックエンド開発

0

300

システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling

1

330

データエンジニアリング領域におけるDuckDBのユースケース

9

2.2k

ExaDB-XSで利用されているExadata Exascaleについて

oracle4engineer

3

260

アジャイルな開発チームでテスト戦略の話は誰がする？ / Who Talks About Test Strategy?

1

610

AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS

8

720

Windows の新しい管理者保護モード

0

200

Featured

See All Featured

Rebuilding a faster, lazier Slack

80

8.9k

How GitHub (no longer) Works

314

140k

Making the Leap to Tech Lead

133

9.1k

Rails Girls Zürich Keynote

94

13k

How to train your dragon (web standard)

91

5.9k

Documentation Writing (for coders)

67

4.6k

Intergalactic Javascript Robots from Outer Space

270

27k

Automating Front-end Workflow

1368

200k

Keith and Marios Guide to Fast Websites

411

22k

Building Your Own Lightsaber

104

6.2k

Easily Structure & Communicate Ideas using Wireframe

193

16k

29

1k

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