CSSを使用して印刷用のドキュメントをフォーマットする

CSSを使用して印刷用のドキュメントをフォーマットする

チケットの予約やホテルへの道順をウェブから印刷したことがある場合は、その結果にそれほど感銘を受けていない可能性があります。したがって、カスケードスタイルシート（CSS）を使用して、印刷されたドキュメントを画面上とほぼ同じ方法でスタイル設定できることに気付かない場合があります。





関心事の分離

CSSの主な利点は、コンテンツをプレゼンテーションから分離できることです。簡単に言うと、これは、次のような非常に古風なスタイルのマークアップではなく、次のことを意味します。



Heading

セマンティックマークアップを使用します。






これははるかにクリーンであるだけでなく、プレゼンテーションがコンテンツから分離されていることも意味します。ブラウザはレンダリングします h1 要素はデフォルトで大きく太字のテキストですが、スタイルシートを使用していつでもそのスタイルを変更できます。

h1 { font-weight: normal; }

これらのスタイル宣言を別のファイルに収集し、そのファイルをHTMLドキュメントから参照することで、分離をさらに有効に活用できます。スタイルシートは再利用でき、その単一のファイルをいつでも変更して、それを使用するすべてのドキュメントのフォーマットを更新できます。



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

スクリーンスタイルシートを含めるのと同様に、印刷用のスタイルシートを指定できます。スクリーンスタイルシートは通常、次のように含まれています。


ただし、追加の属性、 半分 、ドキュメントがレンダリングされるコンテキストに基づいたターゲティングを可能にします。デフォルトでは、前の要素は次のものと同等です。




これは、スタイルシートがドキュメントがレンダリングされるすべてのメディアに適用されることを意味します。ただし、me​​dia属性はprintとscreenの値を取ることもできます。


この例では、 print.css スタイルシートは、ドキュメントが印刷されるときにのみ使用されます。これは非常に便利なメカニズムです。すべてのメディアに適用されるスタイルシートにすべての一般的なスタイル（おそらくフォントファミリまたは行間隔）を収集し、個々のスタイルシートにメディア固有のフォーマットを収集できます。繰り返しますが、これは関心の分離のもう1つの使用法です。



いくつかのスタイル宣言の例

きれいな背景

カラフルな背景や背景画像を印刷するインクを無駄にしたくないことはほぼ間違いありません。ドキュメントに設定されている可能性のあるこれらの値のデフォルトをリセットすることから始めます。

body {
background: white;
color: black;
}

また、背景画像が印刷されないようにすることもできます。これらは装飾的である必要があるため、コンテンツの必須部分ではありません。

* {
background-image: none !important;
}

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

なぜnetflixは私を蹴り続けるのですか

マージンの管理

印刷に関して考慮すべきもう1つの明らかなポイントは、ページマージンです。 CSSはマージンサイズを設定する手段を提供しますが、ブラウザとプリンタもマージン設定自体に影響を与える可能性があることに注意してください。

たとえば、Chromeの印刷ダイアログには、次のような値を持つマージン設定があります なし と 習慣 これは、CSSを介して指定されたものをすべてオーバーライドします。

このため、マージンの決定は公開Webページの読者に任せることをお勧めします。ただし、個人的な使用やデフォルトのレイアウトの作成には、CSSを介して印刷マージンを設定することが適切な場合があります。 NS @ページ ルールではマージンを設定できます。次のように使用する必要があります。

@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にアクセスできるようにしたい場合もあります。簡単な解決策は、リンクされたテキストの後にURLを自動的に挿入することです。

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

このCSSは、次のような結果をもたらします。

a [href]：後 特に後の位置をターゲットにします（ ：後 ）各リンク要素（ に ）実際にURLを持っている（ [href] ）。 NS コンテンツ ここでの宣言は、の値を挿入します href 角かっこ間の属性。生成されたコンテンツの表示を制御するために、他のスタイルルールを適用できることに注意してください。

ページ分割の処理

ページ分割が孤立したコンテンツを残したり、途中でぎこちなく分割したりしないようにするには、ページ分割プロパティを使用します。 ページ分割前 、 ページ分割後 と ページ分割-内側 。例えば：

table { page-break-inside: avoid; }

これは、テーブルが複数のページにまたがらないようにするのに役立ちます。ただし、単一のページよりも高いものはありません。同様に：

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

これは、そのような見出しが常に新しいページを開始することを意味します。ただし、ページのh1の直後にh2を付けると、問題が発生する可能性があります。これは、h1がすべて単独でページに表示されるためです。これを回避するには、その特定のインスタンスを対象とするセレクターを使用して、ページ分割をキャンセルします。次に例を示します。

スラングでhmuはどういう意味ですか
h1 + h2 { page-break-before: avoid; }

印刷スタイルの表示

いずれの場合も、ブラウザとオペレーティングシステムは、多くの場合、標準の印刷ダイアログの一部として、印刷プレビュー機能を提供する必要があります。

Chromeブラウザーを使用すると、開発ツールを使用して印刷スタイルを確認したり、デバッグしたりするのがより便利になります。この例では、印刷スタイルシートを使用したCVを示しています。まず、メインメニューを開いて選択します その他のツール 続いて 開発者ツール オプション：

表示される新しいパネルから、を選択します メニュー 、 それから その他のツール 、 に続く レンダリング ：

次に、下にスクロールして CSSメディアタイプをエミュレートする 設定。ドロップダウンを使用すると、ドキュメントの印刷ビューと画面ビューを切り替えることができます。

印刷スタイルシートをエミュレートする場合、標準 スタイルブラウザ ライブスタイルルールを検査および変更するために使用できます。画面上の印刷出力をエミュレートすることは、まだ100％正確ではないことに注意してください。ブラウザは用紙サイズについて何も知りません。 @ページ ルールをエミュレートできません。

PDFへの印刷

最新のオペレーティングシステムの便利な機能は、PDFファイルに印刷する機能です。事実上、印刷できるものはすべてPDFファイルに送信できます。結局のところ、PDFファイルは印刷されたドキュメントを表すことになっているので、それほど驚くことではありません。

これにより、HTMLは、印刷スタイルシートと組み合わせて、添付ファイルとして送信したり、印刷したりできる高品質のドキュメントを作成するための優れた手段になります。

印刷スタイルシートを使用して、履歴書からレシピやイベントのお知らせまで、あらゆるものを含む高品質のドキュメントを作成できます。 Webページは通常、見栄えが悪く、印刷時に不要な詳細が含まれていますが、スタイルを少し調整するだけで、印刷結果を劇的に改善できます。最終結果をPDFとして保存することは、魅力的でプロフェッショナルなドキュメントをすばやく作成する方法です。

共有 共有 つぶやき Eメール MicrosoftEdgeを使用してWebページをPDFに印刷する方法

後で保存したい興味深い記事に出くわしたことがありますか？さて、あなたは3つの簡単なステップでEdgeでPDFとして保存することができます。

次を読む 関連トピック
  • プログラミング
  • 印刷
  • CSS
著者について ボビージャック（58の記事が公開されました）

ボビーは、20年のほとんどの間ソフトウェア開発者として働いた技術愛好家です。彼はゲームに情熱を注いでおり、Switch Player Magazineのレビュー編集者として働いており、オンラインパブリッシングとウェブ開発のあらゆる側面に没頭しています。

ボビージャックのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください