印刷対応の CSS

何のために？

印刷した紙が見づらい・ナビごと印刷される → 読みづらい。

どう実装する？

@media print { .no-print { display: none; } }。

コード例

@media print {
  /* 印刷で消す要素 */
  .lab-header, .lab-footer, .no-print, .icon-btn { display: none !important; }
  /* 印刷用整形 */
  body { background: white; color: black; padding: 0; }
  a { color: black; text-decoration: underline; }
  /* ページ分割 */
  .page-break { page-break-before: always; }
}