【CSS】印刷用のWebページを構築してみよう!
皆さんこんにちは。本日のテーマは「印刷用のWebページ」。
あまり印刷用としてページを構築したことがなかったのですが、今回要望があり初めて挑戦することに。
サイトをそのまま印刷したいという要望がある方に紹介します。
事前に知っておくと良いこと
- CSSが完璧でも、印刷プレビューや印刷では崩れる事がある
- 運用中のページに印刷用のCSSを反映できるが、印刷のページを用意しておくのが無難
- そのまま印刷より、PDF化してからのほうがきれいになる場合がある
印刷用のCSSを読み込ませてみよう
印刷の時だけ反映されるCSSは読み込み方法が少し変わります。以下のどれでも出来ます。
<link rel="stylesheet" type="text/css" media="print" href="print.css">
@import url("print.css") print;
@media print{ CSSの中に印刷用のCSSを記述することも出来ます。 }
印刷用の状態をデバックする方法
いちいち印刷プレビューを見て調整していたら日が暮れそうなので、この方法がおすすめ!
以下のサイトがわかりやすいです。
デバック解除したいときは「Developer Tools」を非表示にするか、ページを別タブで開き直せば直ります。
taupe (トープ):https://taupe.site/entry/print-css-debug/
【Google Chrome】
- ページを右クリックして「検証」またはショートカット(windows[F12]、mac[option+command+i])で「Developer Tools」を表示。(左上のモバイル表示アイコンをオフにしておく)
- 「Developer Tools」の左にある[⋮]をクリックし「Moretools」→「Rendering」を選び、「Renderingタブ」を表示する。
- 「Rendering」タブに切り替え、「Emulate CSS media type」の項目にあるドロップダウンリストで「print」を選ぶ。
印刷用のページをPDF化する方法
こちらもレイアウトによってはきれいに描画される可能性があるのでオススメ。
【Google Chrome】
ページを右クリック→「印刷」→印刷プレビューが表示されます。
「詳細設定」→「PDFをプレビュー」→「ファイル」→「保存」