Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今さらの @media print

takanorip
September 20, 2018
Technology
2
480

今さらの @media print

takanorip

September 20, 2018
Tweet

More Decks by takanorip

See All by takanorip
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
takanorip
5
670
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.5k
早わかり W3C Community Group
takanorip
0
410
Ubieとアクセシビリティのこれからを考える
takanorip
0
390
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
デザインシステム運用とOKRの良い関係
takanorip
0
1.9k

Other Decks in Technology

See All in Technology
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
OCI Vault 概要
oracle4engineer
PRO
0
9.8k
Lambda10周年！Lambdaは何をもたらしたか
smt7174
2
130
Application Development WG Intro at AppDeveloperCon
salaboy
0
200
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Terraform Stacks入門 #HashiTalks
msato
0
360
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
320
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
心が動くエンジニアリング ── 私が夢中になる理由
16bitidol
0
110
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
1
170

Featured

See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
KATA
mclloyd
29
14k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Why Our Code Smells
bkeepers
PRO
334
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Code Reviewing Like a Champion
maltzj
520
39k
Agile that works and the tools we love
rasmusluckow
327
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k

Transcript

  1. 今さらの @media print Takanori Oki @megro.css

  2. 自己紹介 • Takanori Oki (@takanorip) • Frontend Developer • Nuxt.js

    / Vue.js / Polymer / Web Components • フォントが好きです • 技術書典5の執筆忙しい

  3. 今日は 「印刷用CSS」 の話をします

  4. みなさん 印刷用のCSSって 書いてますか？

  5. @media printで定義

  6. None

  7. @page

  8. None
  9. None

  10. Safari以外なら だいたい使える

  11. 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

  12. background-color

  13. 印刷時には背景色全て 無視されるので 背景色がなくても 大丈夫なようにCSSをあてる

  14. ブラウザの設定を いじればできるけど、 それをユーザーに強いるのは 微妙

  15. Chromeだけ回避策がある

  16. None

  17. page-break系CSS

  18. 要素の中や前後の改行を 操作するプロパティ

  19. None

  20. 注意点： 横並びになってる要素には効 かない

  21. tableの子要素 flexboxの子要素 inline-block float

  22. 印刷時は横並びを解除する 必要がある

  23. 横長tableは印刷できないので 印刷時だけ分割するとかする

  24. 良い印刷CSSライフを！

  25. おわり！ （源柔ゴシック）