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
Eleventy3.0 で始める爆速個人ブログ開発！
takanorip
0
98
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
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
5
850
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.4k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
170
クラウド食堂とは？
hiyanger
0
110
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
490
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
270
Active Directory攻防
cryptopeg
PRO
8
5.4k
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
120
ディスプレイ広告（Yahoo!広告・LINE広告）におけるバックエンド開発
lycorptech_jp
PRO
0
320
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
81k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
160

Featured

See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Statistics for Hackers
jakevdp
797
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Practical Orchestrator
shlominoach
186
10k
BBQ
matthewcrist
87
9.5k
Building Applications with DynamoDB
mza
93
6.2k
Mobile First: as difficult as doing things right
swwweet
223
9.4k

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