2020年11月6日金曜日

印刷時にページトップへ戻るボタンが全ページに印刷されるのを防ぐ。

印刷時に、ウィンドウの固定位置に配置(position: fixed;)したメニュー表示(ハンバーガー)ボタンやページトップへ戻るボタンが全ページに印刷されてしまうのを防ぐ方法。

デモページを表示(印刷される)

デモページを表示(印刷されない)

CSS

補足
  • @media print { … } 内に、印刷したくない要素を display: none; 指定する。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。