CSSを使用してプリンターに優しいページを作成する方法

この記事では、CSSを使用してプリンターに優しいWebページを作成する技術をレビューします。

キーテイクアウト

css for print：cssは、Webページをプリンターに優しいものにする上で重要な役割を果たします。この記事では、CSSを使用して、印刷時にWebコンテンツが最適な形式で表示されることを保証する印刷スタイルシートを作成する方法を概説しています。これには、印刷に特定のメディアクエリの使用、レイアウトとスタイルの調整、印刷ページが読みやすく、よく組織化されていることを確認することが含まれます。
実用的なヒントとテクニック：この記事は、効果的な印刷スタイルシートの作成に関する豊富な実用的なアドバイスを提供します。重要な推奨事項には、不要な要素の削除、レイアウトの線形化、適切なフォントとサイズの使用、ページの休憩の管理、印刷バージョンの補足コンテンツが含まれます。これらのヒントは、Web開発者が自分のサイトを簡単かつ効率的に印刷し、Webコンテンツの完全性を維持しながらインクと紙を保存できるようにするのに役立ちます。
印刷にCSSが必要なのはなぜですか？

「誰がWebページを印刷しますか？」私はあなたが泣くのを聞きます！比較的少数のページが紙に再現されることがあります。しかし、考えてみてください：

旅行またはコンサートチケットの印刷

ルートの方向または時刻表の再現

オフライン読み取りのためにコピーを保存する

接続性が低い領域での情報へのアクセス
書面による注釈のドラフトコンテンツの出力
テキストが小さすぎる、大きすぎる、またはかすかすぎる

列が狭すぎたり、広すぎたり、ページのマージンをオーバーフローすることがあります

セクションはトリミングされたり、完全に消えたりする場合があります

インクは、不必要な色付きの背景と画像に無駄になります
リンクURLは見えません
アイコン、メニュー、および広告が印刷されているため、クリックすることはできません！

応答性のある連続メディアを、あらゆるサイズと方向のページング紙に変換することは困難です。ただし、CSSプリント制御は長年にわたって可能であり、数時間以内に基本的なスタイルシートを完成させることができます。次のセクションでは、ページをプリンターに優しいものにするための十分にサポートされた実用的なオプションについて説明します。

を印刷します

画面スタイリングに加えて

標準スタイルシートの後、html に印刷スタイルのシートを追加できます：

print.cssスタイルは、ページが印刷されているときに画面スタイルに加えて適用されます。

画面メディアを分離して印刷するには、Main.CSSは画面のみをターゲットにする必要があります。

代わりに、@Mediaルールを使用して、既存のCSSファイルに印刷スタイルを含めることができます。たとえば、

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

@mediaの印刷ルールの数を追加できるため、これは関連スタイルをまとめるために実用的かもしれません。必要に応じて画面および印刷ルールも分離できます。

プリンター出力のテスト

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

印刷レイアウトをテストするたびに、木を殺し、とてつもなく高価なインクを使用する必要はありません！次のオプションでは、画面上で印刷スタイルを再現します

プレビューを印刷

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

最も信頼できるオプションは、ブラウザの印刷プレビューオプションです。これは、デフォルトのペーパーサイズを使用してページブレイクが処理される方法を示しています。

または、PDFにエクスポートしてページを保存またはプレビューできる場合があります。

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

開発者ツール

devtools（

f12

または

cmd/ctrl

shift

i

）表示されています。

Chromeで、開発者ツールを開き、より多くのツールを選択し、右上の3ドットアイコンメニューからレンダリングします。エミュレートCSSメディアを変更して、そのパネルの下部に印刷します。 Firefoxで、開発者ツールを開き、[Inspectorタブのスタイル]ペインのトグル印刷メディアシミュレーションアイコンをクリックします。 メディア属性をハッキングします タグを使用してプリンターCSSをロードすると仮定すると、メディア属性を画面に一時的に変更できます。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

繰り返しますが、これはページの休憩を明らかにしません。テストが終了したら、属性をメディア= "print"に復元することを忘れないでください。

不要なセクションを削除します

他のことをする前に、ディスプレイで冗長コンテンツを削除して崩壊します。紙の典型的な不要なセクションには、ナビゲーションメニュー、ヒーローイメージ、ヘッダー、フッター、フォーム、サイドバー、ソーシャルメディアウィジェット、広告ブロック（通常はiframe内のもの）が含まれます：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

ディスプレイを使用する必要がある場合があります：なし！重要。 CSSまたはJavaScript機能が特定のUI状態に従って要素を示している場合。！重要を使用することは通常は推奨されませんが、画面をオーバーライドするプリンタースタイルの基本セットでの使用を正当化することができます。レイアウトを線形化

これを言うのは苦痛ですが、FlexBoxとGridはブラウザのプリンターレイアウトをうまく再生することはめったにありません。問題が発生した場合は、表示：ブロックの使用を検討してください。またはレイアウトボックスで類似しており、必要に応じて寸法を調整します。たとえば、設定幅：100％;ページ幅全体に及ぶ。

プリンタースタイリング

プリンターに優しいスタイリングを適用できるようになりました。推奨事項：

テキストサイズを12pt以上に調整します
必要に応じてパディングとマージンを変更します。標準のCM、MM、またはユニットの方がより実用的かもしれません。

が含まれます

CSS列を採用

標準のA4および米国の文字論文は、より長くて読みやすいテキストの行をもたらす可能性があります。印刷レイアウトでCSS列を使用することを検討してください。たとえば、

この例では、少なくとも37emの水平空間があるときに列が作成されます。メディアクエリを設定する必要はありません。追加の列がより広い紙に追加されます。

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

背景色の代わりに境界を使用します

テンプレートには、暗いまたは逆の配色で示されるセクションまたは呼び出しボックスがあります。

境界線を持つ要素を表すことにより、インクを保存します：

CSSを使用してプリンターに優しいページを作成する方法

画像を削除または反転します

CSSを使用してプリンターに優しいページを作成する方法ユーザーは、装飾的な画像や非必須画像や背景を印刷したくありません。印刷クラスがない限り、すべての画像が非表示になる場合はデフォルトを考慮することができます。

理想的には、印刷された画像は明るい背景に暗い色を使用する必要があります。 CSSでHTML埋め込みのSVG色を変更することは可能かもしれませんが、暗いビットマップがある状況があります：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

CSSフィルターを使用して、印刷スタイルのシートの色を反転および調整できます。たとえば、

CSSを使用してプリンターに優しいページを作成する方法結果：

CSSを使用してプリンターに優しいページを作成する方法

補足コンテンツを追加

印刷されたメディアには、画面上で必要ない追加情報が必要です。 CSSコンテンツプロパティを使用して、テキストを:: :: :: pseudo-elementsに追加できます。たとえば、テキストの後に括弧内にリンクのURLを表示します：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

または印刷のみのメッセージを追加できます：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

より複雑な状況については、印刷時にのみ表示する必要がある要素に印刷などのクラスを使用することを検討してください。たとえば、

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

css：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ログイン後にコピー

注：ほとんどのブラウザは、印刷されたページのヘッダーおよび/またはフッターにURLと現在の日付/時刻を表示するため、この情報をコードで生成する必要はほとんどありません。ページが壊れます

CSS3のプロパティは、壊れてから壊れた状態で、ページ、列、または領域の破損が要素の前後に動作する方法を制御できます。サポートは優れていますが、古いブラウザは、同様のページブレイク前とページブレイク後のプロパティを使用する場合があります。

以前の分割前と分割後の値を使用できます

auto：デフォルト - ブレークは許可されていますが、強制されていません

避けてください：ページ、列、または領域の休憩を避けます

回避ページ：ページブレイクを避けてください
ページ：ページブレークを強制します
常に：ページのエイリアス
左：フォースページが壊れるので、次のページは左ページです
右：フォースページが壊れるので、次のページは正しいページです

見出しの直前にページブレークを強制します：

注：ページブレークを使用することに注意してください。理想的には、プリンターの出力はできるだけ少ないページを使用する必要があります。

ブレークインスサイド（および古いページブレイクインインディサイド）プロパティは、要素内でページブレイクが許可されているかどうかを指定します。一般的にサポートされている値：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

auto：デフォルト - ブレークは許可されていますが、強制されていません

避けてください：可能な場合は内部休憩を避けます

回避ページ：可能であれば内側のページブレークを避けてください

ボックスデカールブレイクプロパティは、ページ全体で要素の境界線を制御します。境界のある要素に内側のページが切れている場合：

スライス：デフォルトはレイアウトを分割します。上部の境界は最初のページに表示され、下の境界線は2番目のページに表示されます。

CSSページブレイクプロパティは、印刷にのみ影響するため、画面または印刷スタイルに配置できますが、明確にするために印刷CSSで使用することをお勧めします。

ページブレイクコントロールは、ブラウザへの提案にすぎないことに注意してください。レイアウトが論文の範囲に制限されているため、休憩が強制または回避されることは保証されていません。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ログイン後にコピー

痛みを印刷

の印刷の制御は常に制限され、結果はブラウザーによって異なる場合があります。そうは言っても：

プリンターに優しいスタイルシートは、任意のサイトにレトロフィットできます

ほとんどのプリンタースタイリングは、ブラウザの大部分で動作します

To-Doリストに追加してください！
CSS Master、第3版

css

を使用してプリンターに優しいページを作成することに関するFAQ CSSプリントStyleSheetの作成は、印刷時にWebページの外観を制御するために重要です。 CSSを使用してプリンターに優しいページを作成する方法について、よくある質問のいくつかをカバーして終了しましょう。印刷のCSSとは？

ブラウザからWebページを直接印刷することは可能ですが、印刷されたWebページは、画面に表示されるページのようには表示されないことがよくあります。 WebページはCSSでスタイリングされており、CSSを使用して印刷ページにスタイリングを提供することもできます。ただし、通常、Webページのスタイルは印刷によく翻訳されていないため、印刷されたページ専用にCSSスタイルを作成することが重要です。 PrintのCSSは、プリンターが印刷ページのレイアウトをフォーマットするのに役立つように特別に設計された一連のスタイルです。 印刷にCSSを使用するにはどうすればよいですか？

WebページCSSは、Webページの印刷バージョンに自動的に適用されますが、多くの場合、予期しない結果または不要な結果があります。プリントのCSSは、より柔軟なブラウザ環境とは対照的に、印刷ページの一意の制約を認識します。印刷のスタイルの設定には、印刷されたページに要素がどのようにレイアウトされるかについて考えることが含まれます。これには、メニューなど、印刷に関連しない印刷に関連しない非表示の要素、URLが印刷されたページに表示されるようなスタイリングリンク、印刷されたものに関連しない背景画像とフォント色の削除が含まれます。 Webページのバージョン。

CSSプリントStyleSheetをセットアップするにはどうすればよいですか？

CSSで印刷スタイルを提供する2つの基本的な方法があります。別のスタイルシートを介して、またはメディアクエリを介して。 CSSプリントスタイルは、ドキュメントの

セクションのWebページにリンクされた別のスタイルシートに保存できます。 " />

CSSプリントスタイルは、メディアクエリを介して、他のメディアのスタイルとともにスタイルシート内に配置できます。
}

印刷スタイルシートの一般的なユースケースは何ですか？
印刷スタイルシートの一般的なユースケースには次のものが含まれます。
- 紙の読みやすさのためのフォントサイズとスタイルの調整。
- 印刷時に関連しない特定の要素を削除または隠します（ナビゲーションメニューなど）。 - 画像と背景の色がデフォルトで印刷されないようにします。

- ページ全体でコンテンツの分割方法を制御するためにページの切断を指定します。

印刷バージョンの特定の要素を非表示にするにはどうすればよいですか？

ディスプレイプロパティをなしに設定することにより、CSSを使用して印刷バージョンの特定の要素を非表示にできます。たとえば、

@media print {
.hide-on-print {ディスプレイ：なし;
}

}

印刷スタイルシートでページブレークを指定するにはどうすればよいですか？

ページブレイク前とページブレイク後のCSSプロパティを使用して、ページブレイクを指定できます。たとえば、

@media print {
.page-break { page-break-before：wearte;
}
}

印刷されたドキュメントのページマージンを変更できますか？

はい、印刷スタイルシートの@Pageルールを使用して、印刷されたドキュメントのページマージンを変更できます。たとえば、

@page {
マージン：1cm;
}

画像や背景の色が印刷されないようにするにはどうすればよいですか？

プリントスタイルシートにはない値を持つバックグラウンドイメージや背景色などのCSSプロパティを使用して、画像や背景色の印刷を防ぐことができます。たとえば、

@media print {img {
display：none;
}

body {background-color：white;

}

印刷のためにフォントスタイルとサイズを変更することは可能ですか？

はい、印刷スタイルシート内のさまざまなスタイルを指定することにより、印刷のフォントスタイルとサイズを変更できます。たとえば、

@media print {body {
font-size：12pt;
font-family：arial、sans-serif;
}
}