飛行機の予約やホテルの案内をインターネットからプリントアウトしたことがある人は、その結果にあまり感心しないのではないでしょうか。そのため、CSS（Cascading Style Sheets）を使って、印刷物のスタイルと画面上のスタイルをほぼ同じにすることができることをご存じない方も多いのではないでしょうか。

懸念事項の分離

CSSの主な利点は、コンテンツと表現の分離である。簡単に言えば、これは非常に古いスタイルのマークアップ、例えば

<font size="7"><b>Heading</b></font>

セマンティックマーカーを使用しています。

<h1>Heading</h1>

この方がすっきりするだけでなく、私たちのプレゼンテーションがコンテンツから切り離されているということでもあります。デフォルトでは、ブラウザはh1要素を大きく太いテキストで表示しますが、スタイルシートでいつでも変更することができます。

h1 { font-weight: normal; }

これらのスタイル宣言を別のファイルにまとめ、HTML文書からそのファイルを参照することで、分離をより有効に活用することができるのです。スタイルシートは再利用できますし、それを使う各文書の書式を更新するために、いつでも個々のファイルを変更することができるのです。

印刷用スタイルシートを含む

画面のスタイルシートを入れるのと同様に、印刷のスタイルシートも指定することができ、通常、以下のような内容が含まれる。

<link href="base.css" rel="stylesheet" />

しかし、もう一つの属性であるmediaによって、文書が表示される文脈に基づいて対象を決定することができる。デフォルトでは、前の要素と同じように

<link href="base.css" rel="stylesheet" media="all" />

これは、スタイルシートが、文書のレンダリングに使用されるあらゆるメディアに適用されることを意味します。

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

この例では、print.css スタイルシートは文書を印刷するときのみ使用されます。これは非常に便利な仕組みです。すべてのメディアに適用される共通のスタイル（おそらくフォントファミリーや行間）をスタイルシートに集め、メディア固有の書式を一つのスタイルシートにまとめることができる。これもまた、Separation of Concern（懸念事項の分離）の活用のひとつです。

スタイルステートメントの例

クリーンな背景

色付きの背景や背景画像を印刷することは、インクを無駄に消費することになります。

body { background: white; color: black;}

また、背景画像を印刷しないようにすることもできます。これらは装飾であり、コンテンツの一部として必要なものではありません。

* { background-image: none !important;}

関連：CSSで背景画像を設定する方法

利益率のコントロール

もうひとつ、印刷に関する当たり前のポイントとして、余白があります。CSSは余白の大きさを設定する方法を提供しますが、ブラウザやプリンター自体も余白の設定に影響を与える可能性があることを念頭に置いておく必要があります。

例えば、Chromeの「印刷」ダイアログには、noneやcustomといった値のマージン設定があり、CSSで指定したものを上書きすることができます。

したがって、マージンの判断は公開ページで読者に委ねることをお勧めします。ただし、個人で使用する場合やデフォルトのレイアウトを作成する場合は、CSSで印刷余白を設定することが適切な場合があります。ページルールでは、余白を設定することができますので、以下のように使用します。

@page { margin: 2cm;}

CSSには、ページが奇数（右）か偶数（左）か表紙かによって余白を変えるなど、より複雑な印刷レイアウトを行う機能もある。

残念ながら、特にカバーオプションの対応が悪いのですが、最低限の使用は可能です。以下のスタイルでは、ページ下部の余白が上部よりわずかに大きく、ページ外縁の余白が背表紙よりわずかに大きくなります。

@page { margin-left: 20mm; margin-right: 20mm; margin-top: 40mm; margin-bottom: 50mm;}@page :left { margin-left: 30mm;}@page :right { margin-right: 30mm;}

無関係なコンテンツは隠す

すべてのコンテンツが印刷版に適用されるわけではありません。ページにバナーナビゲーション、広告、サイドバーが含まれる場合、これらの詳細が印刷版に表示されないようにする必要がある場合があります、例えば次のような場合です。

#contents, div.ad { display: none; }

固定式リンケージ

ハイパーリンクは印刷物には明らかにふさわしくないので、周囲のテキストと区別するためのスタイリングを削除する必要があるかもしれません。

a { text-decoration: none; color: inherit; }

しかし、読者が元のURLにアクセスできるようにしたい場合があります。簡単な解決策は、リンクテキストの後に自動的に**を付けることです:.

a[href]:after { content: " (" attr(href) ")"; font-size: 90%; color: #333;}

このCSSでは、次のような結果が得られます。

a[href]: after は、実際にURL（[href]）を持つ各リンク要素（a）の後の位置（:after）に特化したものです。ここでは、href属性の値である**括弧の間で内容を宣言しています。なお、生成されたコンテンツの表示を制御するために、他のスタイルルールを適用することができる。

改ページへの対応

ページ区切りでコンテンツが孤立したり、コンテンツが途中で切れたりしないように、ページ区切り前、ページ区切り後、ページ区切り内の属性を使用するようにしましょう。例えば、こんな感じです。

table { page-break-inside: avoid; }

このようにすることで、表が複数ページにまたがることを防ぐことができます。ただし、1ページが他のページより高くなることはありません。

h1, h2 { page-break-before: always; }

つまり、このような見出しは常に新しいページが始まるということです。ただし、あるページのh1の直後にh2を記述すると、h1が完全に独立してページが終了してしまうため、問題が発生する場合があります。これを避けるには、その特定のインスタンスに固有のセレクタを使用して、単純にページ区切りを削除します（例）。

h1 + h2 { page-break-before: avoid; }

プリントスタイルを見る

どのような場合でも、ブラウザとオペレーティングシステムは、通常、標準的な印刷ダイアログの一部として、印刷プレビュー機能を提供する必要があります。

Chromeでは、この例のように、デベロッパーツールを使って、印刷スタイルの確認やデバッグまで簡単に行えます。"オプション "です。

表示された新しいパネルから、「メニュー」→「その他のツール」→「レンダリング」を選択します。

ドロップダウン・リストで、ドキュメントの印刷表示と画面表示を切り替えることができます。

標準のスタイルブラウザーは、スタイルシートの印刷をシミュレートする際に、ライブのスタイルルールの確認や修正に使用することができます。画面上のシミュレーション印刷は、まだ100％正確ではないことを覚えておいてください。ブラウザは用紙サイズを知らないので、@pageルールをエミュレートできない。

pdfで印刷する

最近のOSの便利な機能として、PDFファイルへの印刷機能があります。印刷できるものであれば、ほぼ何でもPDFファイルに送れるのは当然のことです。結局のところ、PDFファイルは印刷された文書を表現するものなのです。

このため、HTMLと印刷スタイルシートを組み合わせることで、印刷だけでなく添付ファイルとして送信できる高品質なドキュメントを作成することができます。

各種ドキュメントの印刷

履歴書からレシピ、イベントの告知まで、印刷スタイルシートを使って高品質なドキュメントを作成することができます。ウェブページを印刷すると、読みにくかったり、不要な部分が含まれていたりすることがよくありますが、ちょっとしたスタイルの工夫で、印刷の仕上がりを大幅に改善することができます。最終的にPDFとして保存することで、魅力的でプロフェッショナルなドキュメントを素早く作成することができます。