印刷しようとしたらスタイルが崩れていた時

完成したと思って印刷のプレビューを見たら、デザインが総崩れを起こしていました。

参考サイト

https://ohta-hiroyuki.hatenablog.com/entry/2017/07/19/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%81%AE%E3%81%BE%E3%81%BE

なるほど！レスポンシブ対応同様、print用の設定も必要なんですね。色々追加してみるも

右側が少し切れてます。

ではと、

 zoom:70%;

を@media print {}内のbodyに追記

成功！するも…

ありゃりゃ

margin-bottom: 200px;

では、@media print {}内に対象エリア内で上記を追記

@media奥が深いなー

https://www.ttrinity.jp/product/8402234#495