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
790
効果的な管理画面を デザインをするために 避けるべき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
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
520
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
400
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
MIMEと文字コードの闇
hirachan
2
1.5k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
260
JavaにおけるNull非許容性
skrb
2
2.7k
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
290
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Why Our Code Smells
bkeepers
PRO
336
57k
KATA
mclloyd
29
14k
Fireside Chat
paigeccino
35
3.2k
Practical Orchestrator
shlominoach
186
10k
Building an army of robots
kneath
303
45k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
A Philosophy of Restraint
colly
203
16k
Unsuck your backbone
ammeep
669
57k
A better future with KSS
kneath
238
17k
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ライフを!
おわり! (源柔ゴシック)