HTMLをスタイルで印刷する方法

CSSを使用してブラウザからプリンタまたはPDFドキュメントに印刷する際のヒント


私たちはますます画面を見つめていますが、印刷は依然として重要です。

ブログ投稿でも。 2009年に一度、私が公開したすべてのブログ投稿をパーソナルアシスタントに印刷させたと言った人に会ったことを覚えています(はい、私は少しぼんやりと見つめていました)。間違いなく予想外。

印刷を検討するための私の主な使用例は、通常、PDFへの印刷です。ブラウザ内で何かを作成する可能性があり、それをPDFとして利用できるようにしたい。

ブラウザを使用すると、これが非常に簡単になります。ドキュメントを印刷しようとしたときにChromeがデフォルトで「保存」になり、プリンタが利用できなくなります。Safariのメニューバーには専用のボタンがあります。

Safari Export PDF

印刷時に実行する可能性のある一般的なことは、ドキュメントの一部(フッター、ヘッダー内の何か、サイドバーなど)を非表示にすることです。

印刷に別のフォントを使用したい場合がありますが、これは完全に合法です。

印刷用の大きなCSSがある場合は、別のファイルを使用することをお勧めします。ブラウザは印刷時にのみダウンロードします。

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

CSS @media print

以前のアプローチの代替は、メディアクエリです。このブロック内に追加するもの:

@media print {
  /* ... */
}

印刷されたドキュメントにのみ適用されます。

HTMLはリンクがあるので素晴らしいです。それは正当な理由でハイパーテキストと呼ばれています。印刷するとき、内容によっては多くの情報を失う可能性があります。

CSSは、コンテンツを編集し、後にリンクを追加することで、この問題を解決するための優れた方法を提供します。<a>タグテキスト、使用:

@media print {
    a[href*='//']:after {
        content:" (" attr(href) ") ";
        color: $primary;
    }
}

対象a[href*='//']これは外部リンクに対してのみ行います。ナビゲーションと内部インデックス作成のための内部リンクがあるかもしれませんが、これはほとんどのユースケースでは役に立たないでしょう。内部リンクも印刷する場合は、次のようにします。

@media print {
    a:after {
        content:" (" attr(href) ") ";
        color: $primary;
    }
}

ページ余白

すべてのページに余白を追加できます。cmまたはin紙の印刷に適した単位です。

@page {
    margin-top: 2cm;
    margin-bottom: 2cm;
    margin-left: 2cm;
    margin-right: 2cm;
}

@pageを使用して、最初のページのみをターゲットにするために使用することもできます@page :first、またはを使用して左右のページのみ@page :leftそして@page: right

改ページ

一部の要素の後、または要素の前に改ページを追加することをお勧めします。使用するpage-break-afterそしてpage-break-before

.book-date {
    page-break-after: always;
}

.post-content { page-break-before: always; }

それらのプロパティ多種多様な価値観を受け入れる

途中で画像を壊さないようにする

私はFirefoxでこれを経験しました:デフォルトでは画像は中央でカットされ、次のページに続きます。それはテキストにも起こるかもしれません。

使用する

p {
  page-break-inside: avoid;
}

画像をp鬼ごっこ。ターゲティングimg私のテストでは直接機能しませんでした。

これは、画像だけでなく、他のコンテンツにも当てはまります。不要なときに何かがカットされていることに気付いた場合は、このプロパティを使用してください。

PDFサイズ

Chromeで画像を含む400ページ以上のPDFを印刷しようとすると、最初は100MB以上のファイルが生成されましたが、画像の合計サイズはそれほど大きくありませんでした。

FirefoxとSafariで試してみましたが、サイズは10MB未満でした。

いくつかの実験の結果、ChromeにはHTMLをPDFに印刷する3つの方法があることが判明しました。

  • ❌システムダイアログを使用して印刷しないでください
  • ❌「PDFをプレビューで開く」をクリックしないでください
  • ✅代わりに、Chromeの印刷ダイアログに表示される[保存]ボタンをクリックします

The right way to print in Chrome

これにより、他の2つの方法よりもはるかに高速に、はるかに小さいサイズでPDFが生成されます。

印刷プレゼンテーションをデバッグする

Chrome DevToolsは、印刷レイアウトをエミュレートする方法を提供します。

Enable Chrome DevTools Rendering

パネルが開いたら、レンダリングエミュレーションを次のように変更します。print

Change the render to print

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: