Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今さらの @media print
Search
takanorip
September 20, 2018
Technology
2
480
今さらの @media print
takanorip
September 20, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.2k
偏光画像処理ライブラリを作った話
elerac
1
170
Охота на косуль у древних
ashapiro
0
110
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
300
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
610
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
720
Windows の新しい管理者保護モード
murachiakira
0
200
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
How GitHub (no longer) Works
holman
314
140k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Rails Girls Zürich Keynote
gr2m
94
13k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Documentation Writing (for coders)
carmenintech
67
4.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Automating Front-end Workflow
addyosmani
1368
200k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building Your Own Lightsaber
phodgson
104
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
RailsConf 2023
tenderlove
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ライフを!
おわり! (源柔ゴシック)