CSSを使用して印刷用にWebサイトのスタイルを設定する方法

印刷はウェブと何の関係がありますか？

私たちのほとんどはオンラインで生活しており、すべての情報をWebから取得しています。 私たちは、多くのデバイスから、毎日、一日中接続しています。 実際、それが確かに真実ではないのに、印刷物が死んでいると聞いたことがあるかもしれません。 以前ほど頻繁に印刷することはないかもしれませんが、デバイスでコンテンツを表示することは、ハード印刷されたコピーを見ることに代わるものではない場合があります。 貴重なハウツーコンテンツ、利用可能なクーポン、道順、ポートフォリオの例、またはユーザーが印刷物で見たいと思うその他のものはありますか？ もしそうなら、あなたのウェブサイトにカスタム印刷ルールを設定することは確かにあなたのユーザーのための経験を形作るのを助けるでしょう。

印刷用のデザイン方法

印刷固有のスタイルを定義することにより、すべての魔法がCSSに含まれています。 他のすべてのスタイルとは別に、別のprint.cssスタイルシートを作成すると便利な場合があります。 すべてのサイトに印刷スタイルシートがあるわけではないことに注意してください。 これは、開発プロセスの追加機能およびステップです。 印刷スタイルが指定されていない場合、デフォルトのスタイルが印刷に使用されます。 印刷をより効率的にするためにスタイルを定義します。これにより、デフォルトが上書きされます。

命名規則と特定のスタイルは、独自のプロジェクトのスタイルシートに固有のものですが、これらの概念が適用されます。 基本を追加したら、Webサイトのデフォルトのスタイルシートに目を通し、最高の印刷エクスペリエンスを確保するために印刷スタイルが必要な固有の状況を探します。

色とレイアウトに関する考慮事項

ほとんどの人は、カラーインクを使用するため、白黒で印刷することを好みます。 また、テキストが黒で白い紙に印刷されている場合は、コントラストが高くなります。 メディアクエリは、最新のレスポンシブWebデザインで重要であるため、おそらくご存知でしょう。 印刷スタイルを作成するには、メディアクエリも必要です。

これは、本文のテキストを黒くし、最高の印刷のために背景色を取り除くものです。

@media print {
body {
color: #000;
background: #fff;
}
}


おそらく、テキストはTimesNewRomanで印刷されます。 それは何も悪いことではありませんが、別のフォントを指定したい場合はどうでしょうか。 デフォルトのスタイルで行ったように、これは印刷でも行うことができます。 その間、線の高さを忘れないようにしましょう。
body {
font: 13pt Tahoma, Geneva, sans-serif;
line-height: 1.5;
}


不要な要素を隠す
おそらく、 display: noneが、これは印刷スタイルにはまったく問題ありません。 一部の要素を非表示にすることで、ユーザーが印刷するためのより良い方法を提供し、ハードコピーから不要なものをすべて保持します。 目標は、正確なWebページではなく、最も重要なコンテンツを効果的に印刷できるようにすることです。
		


ナビゲーション、フッター、サイドバー、背景画像など、不要なページ要素があるため、ここにdisplay: noneはありません。
@media print {
nav, aside, footer {
display: none;
}

section {
background: none
}
/* section had a patterned background in the default styling which is best removed in the print style */
}


記事は印刷されることが多いので、各記事を別々のページから始めるのは素晴らしいことです。 重要な情報がグループ化され、複数のページに分散されていない場合、ユーザーは印刷物を整理するのがはるかに簡単です。
		


これを印刷スタイルシートに追加すると、記事は常に新しいページから始まります。
article {
page-break-before: always;
}


順序付けされていないリストを同じページにまとめておくのも良い考えです。
ul {
page-break-inside: avoid;
}


さらに一歩進んで、見出し、画像、ブロッククォート、表、その他のリスト要素についても同じことを行いましょう。
h1, h2, h3, h4, h5, h6 {
page-break-after:avoid;
page-break-inside:avoid
}

img {
page-break-inside:avoid;
page-break-after:avoid;
}

blockquote, table, pre {
page-break-inside:avoid
}

ul, ol, dl {
page-break-before:avoid
}

[/code]

</pre>
<img class="aligncenter wp-image-12547 size-full" src="https://getflywheel.com/wp-content/uploads/2015/08/print-styling-03.jpg" alt="print-styling-03" width="1022" height="480" />
<pre>
<h3>Page margin measurements</h3>

We will be adding a width of 100% to the body and article and getting rid of any unnecessary margins or padding. That way we can strip out any unnecessary spacing.



body, article {
width: 100%;
margin: 0;
padding: 0;
}


ここで、印刷用に間隔を実際に微調整できます。 Webデザインにセンチメートルが表示されることはめったにありませんが、ページの境界線を決定する目的には最適です。 @pageルールは、間隔をターゲットにする方法です。 この例では、すべての境界線の周囲に2cmの余裕があります。 この測定値は、多少のスペースを考慮してカスタマイズできます。 たとえば、ユーザーがメモを取りたい場合は、マージンを大きくすることが役立ちます。
		


@page {
margin: 2cm;
}


ページを印刷してバインダーに入れる場合は、1ページおきに余白を調整するオプションがあることに注意してください。 左のページは1、3、5ページ…、右のページは2、4、6ページ…です。
@page :left {
margin: 1cm 3cm 1cm 2cm;
}

@page :right {
margin: 1cm 2cm 2cm 3cm;
}


最初のページのカスタマイズは、特定の場合に役立ちます。 :first page疑似クラスを使用することにより、最初に印刷されたページのスタイルを決定できます。
@page :first {
margin: 1cm 2cm;
}


		


印刷はあなたにストレスを与えますか？ プロジェクトをプロのように印刷するためのヒントをいくつか紹介します。

画像とイントロテキストのアイデア
これらはあなたのサイトに当てはまるかもしれませんし、当てはまらないかもしれませんが、それでも注意するのは良いことです。
画像が途切れたり、印刷されたページの端からにじんだりするのを防ぐために、最大幅の宣言を追加すると、これを防ぐことができます。
img {
max-width: 100% !important;
}


素敵なウェルカムメッセージは素晴らしい追加です。 印刷コンテンツはしばらくの間存在するので、親しみやすいメッセージやリマインダーを含めるのはいつでもいいことです。
		


header:before {
display: block;
content: "Thank you for visiting my website at www.mysite.com.   Please check back for upcoming specials and new products.";
margin-bottom: 15px;
padding: 5px 8px;
font-style: italic;
}


印刷に関する考慮事項の基本について説明したので、これらのアイデアを印刷スタイルシートに簡単に組み込むことができます。 印刷は、Webを使用するときに最終的に考えるものではありませんが、コンテンツにアクセスする方法に関係なく、ユーザーに同じ優れたエクスペリエンスを提供するための優れた方法です。
		



		
		
より多くのデザインのヒントが必要ですか？ レイアウトを購読してください！
		
週に1回、最新のデザインとWordPressコンテンツを受信トレイに直接送信します。
		

		
		はい、お願いします！