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
490
今さらの @media print
takanorip
September 20, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
580
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Technology
See All in Technology
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.8k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
180
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
270
物体検出モデルでシイタケの収穫時期を自動判定してみた。 #devio2025
lamaglama39
0
230
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
LLMプロダクトの信頼性を上げるには?LLM Observabilityによる、対話型音声AIアプリケーションの安定運用
ivry_presentationmaterials
0
430
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
190
Featured
See All Featured
Side Projects
sachag
455
43k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
A designer walks into a library…
pauljervisheath
209
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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ライフを!
おわり! (源柔ゴシック)