過去には、プリンターに優しいバージョンのWebページを作成することは、レイアウトとフォーマットの両方を備えた別のページを設計し、印刷時に満足のいく結果を達成できるようにすることを意味します。現在、構造化されたXHTMLとCSSを使用することにより、はるかに少ない労力で同じ効果を達成できます。画面表示から印刷効果までのほとんどのWebページ
過去には、プリンターに優しいバージョンのWebページを作成することは、レイアウトとフォーマットの両方を備えた別のページを設計し、印刷時に満足のいく結果を達成できるようにすることを意味します。現在、構造化されたXHTMLとCSSを使用することにより、はるかに少ない労力で同じ効果を達成できます。
画面ディスプレイから印刷効果まで
ほとんどのWebページは、コンピューター画面での表示に適しているように設計されています。ただし、ユーザーが特定のページを印刷する必要がある場合があります。おそらく、長期的なレコードを保持するか、便利なオフラインリファレンスとして使用するだけです。
今の問題は、コンピューターのカラー画面で人目を引くように見える機能の多くが、特にプリンターが白黒の場合は、Webページの印刷バージョンに同じ効果を示すことができないことです。グレースケール印刷に降格すると、色の組み合わせにより（元の）コントラスト効果が失われます。グラフィックは歪んでいるように見え、印刷するのに時間がかかりすぎます。 Webページで重要な役割を果たすナビゲーションボタンは、印刷ページでは役に立ちません。
これらの問題を克服するために、Webクリエイターは多くの場合、プリンターに優しいバージョンのページを設計し、訪問者が印刷したいという欲求を持っています。プリンターに優しいバージョンには通常、メインのWebページと同じコンテンツが含まれていますが、ほとんどのグラフィック、背景、ナビゲーション要素は省略されています。また、このページは色を何らかの形に変換して、許容可能なグレースケール画像を生成します。
CSSソリューション
構造化されたXHTMLタグとCSS形式を使用してコンテンツと表現を分離することの1つの利点は、CSSスタイルを変更することで、コンテンツを簡単に再フォーマットできることです。したがって、プリンターに優しいページを作成することは、別のCSSファイルを同じXHTMLページにリンクすることです。
画面スタイルのシートと印刷スタイルシートを同じXHTMLファイルに同時にリンクできます。そのため、プリンターに優しいページを個別に作成する必要はありません。プリンターに優しいスタイルシートだけで十分です。マルチメディアタイプファイルをリンクコードに追加すると、画面出力をフォローまたは無視するルール、および印刷に使用するルールをブラウザに伝えています。
以下は、CSSファイルのペアにリンクする例です。
以下は引用されたコンテンツです。
<linkrel = stylesheettype = text/cssmedia = screenhref = mysite-screen.css/>
<linkrel = styleSheettype = text/cssmedia = printthref = mysite-print.css/>
古いブラウザをサポートする必要がある場合は、CSS1のメディア記述子画面と印刷を使用することに固執する必要があります。それらは相互に排他的であるため、画面表示用のページを生成する場合、ブラウザは印刷スタイルシートを無視し、その逆も同様です。したがって、各スタイルシートには同じスタイルセレクターを含める必要がありますが、異なる出力デバイスに個別にページスタイルを生成するための異なるルール宣言があります。
CSSを簡素化します
古いブラウザの世話をして、ユーザーがCSS2対応ブラウザー（IE5以降やNetScape6以降など）を使用していると想定している場合は、新しいすべてのメディア記述子を使用してCSSコードを大幅に簡素化できます。
CSS2メディア記述子を使用してリンクする例は次のとおりです。
以下は引用されたコンテンツです。
<linkrel = styleSheettype = text/cssmedia = allhref = mysite-all.css/>
<linkrel = stylesheettype = text/cssmedia = printthref = mysite-print2.css/>
これらのリンクは、前のリンクとほぼ同じです。違いは、CSSファイルにメディアを印刷するスタイルが含まれていることです。
メディアに関連付けられているスタイル= CSSファイルのすべては、画面表示、印刷、および他のすべてのメディアに適用できます。そのため、作成したすべてのスタイルをこのファイルに入れることができます。メディア=印刷に個別に関連付けられているCSSファイルは、ページがすべてのメディアファイルのすべてのスタイルを継承するため、はるかに小さくなる可能性があるため、印刷メディアファイルにこれらのスタイルをコピーする必要はありません。
印刷メディアCSSファイルで必要な唯一のスタイルは、印刷用にページスタイルを変更または追加するスタイルです。一般的に、これは、グラフィックとナビゲーションコンテンツを含むDIVの表示、ボディラベルとメインDIVの幅と空白の設定を印刷に適した設定に置き換えることを禁止するいくつかのスタイルにすぎません。
すべてのメディアCSSファイルと印刷メディアCSSファイルが同じカスケードスタイルのルールに結合されるため、このトリックは機能します。したがって、これらのCSSファイルのリンク順序は非常に重要です。メディアファイルリンクを印刷する前に、すべてのメディアファイルリンクを配置する必要があります。
印刷メディアCSSファイルを使用するためのヒントを次に示します。
DIVの表示を禁止する場合は、visibility：hidden：none：none：hidden：display：noneを使用する必要があります。
ドットもインチも、画面表示の正しい測定単位ではありませんが、プリントアウトの正しい測定単位です。
メディアファイルの印刷で使用されるセレクターは、すべてのメディアファイルで使用するセレクターとまったく同じでなければなりません。たとえば、Div＃sidenavを使用してすべてのメディアファイルでIDを使用してsidenavとしてDivを選択する場合、メディアファイルの印刷で#sidenavを使用すると、目標を達成できない場合があります。
あるファイルから別のファイルに変更されるルール宣言を明示的に強制することを忘れないでください。たとえば、すべてのメディアファイルの要素のパディングを設定し、印刷物でこのパディングを削除したい場合、印刷メディアファイルのパディング宣言を無視するスタイルを追加するだけでは不十分です。以前の設定を置き換えるには、パディングを明示的に設定する必要があります。
DreamWeaverのようなグラフィックエディターを使用している場合は、印刷効果の代わりに生成されたページの画面効果をプレビューできます。 DreamWeaver Design Viewingウィンドウで印刷スタイルをプレビューするには、印刷メディアCSSファイルへのリンクをMedia =画面に変更します。これにより、印刷メディアファイルでCSSスタイルをプレビューできます。ページを投稿する前に、メディア記述子をメディアに戻すことを忘れないでください。
訪問者にプリンターに優しいWebページを提供する必要がある場合、元のページの個別のバージョンを作成する必要はなくなります。 Media = Print Media Descriptorを使用してCSS StyleSheetにリンクを追加すると、XHTML/CSSページをプリンターに優しいページに変換できます。