XHTML CSS ページをプリンター ページに変換_HTML/Xhtml_Web ページの制作

これまで、Web ページの印刷用バージョンを作成するには、印刷したときに見栄えが良くなるように、レイアウトと書式を変更して別のページをデザインする必要がありました。構造化された XHTML と CSS を使用することで、はるかに少ない労力で同じ効果を達成できるようになりました。
画面表示から印刷効果まで
ほとんどの Web ページは、コンピューター画面で表示されるように設計されています。ただし、長期的な記録を保存したり、便利なオフライン参照として使用したりするために、ユーザーが特定のページを印刷する必要がある場合があります。
現在の問題は、カラー コンピュータ画面上で Web ページを人目を引くカラフルに見せる機能の多くが、Web ページの印刷版では同じ効果が得られないことです (特にプリンタが黒色の場合)。白。 。グレースケール印刷にダウングレードすると、色の組み合わせが歪んで表示され、印刷に時間がかかりすぎます。また、Web ページで重要な役割を果たしているナビゲーション ボタンも、ページ上で適切に印刷されません。
これらの問題を克服するために、Web 作成者は訪問者が印刷したくなるようにページの印刷用バージョンを設計することがよくあります。印刷用バージョンには通常、メインの Web ページと同じコンテンツが含まれていますが、ほとんどのグラフィックス、背景、およびナビゲーション要素が省略されています。また、ページは色を何らかの形式に変換して、許容可能なグレースケール画像を生成します。
CSS ソリューション
構造化 XHTML マークアップと CSS フォーマットを使用してコンテンツとプレゼンテーションを分離する利点の 1 つは、CSS スタイルを変更することでコンテンツを簡単に再フォーマットできることです。したがって、印刷に適したページを作成するには、異なる CSS ファイルを同じ XHTML ページにリンクする必要があります。
画面スタイル シートと印刷スタイル シートの両方を同じ XHTML ファイルにリンクできるため、印刷用の別のページを作成する必要はなく、印刷用のスタイル シートを作成するだけです。リンク コードにマルチメディア タイプ ファイルを含めると、画面出力にどの CSS ルールに従うか無視するか、また印刷出力にどのルールを使用するかをブラウザに指示することになります。
CSS ファイルのペアへのリンクの例を次に示します。
以下は引用内容です:


古いブラウザをサポートする必要がある場合は、CSS1 メディア記述子画面に固執して印刷する必要があります。これらは相互に排他的であるため、ブラウザは画面表示用のページを生成するときに印刷スタイル シートを無視し、その逆も同様です。したがって、各スタイル シートには同じスタイル セレクターが含まれている必要がありますが、異なる出力デバイスに対して個別にページ スタイルを生成するための異なるルール宣言が必要です。
CSS の簡素化
古いブラウザ バージョンの管理を放棄し、ユーザーが CSS2 をサポートするブラウザ (IE5 以降や Netscape6 以降など) を使用していると仮定する場合は、新しい全メディア記述子を使用すると、CSS コードを大幅に簡素化できます。
CSS2 メディア記述子を使用したリンクの例を次に示します。
以下は引用内容です:


これらのリンクは前のリンクとほぼ同じですが、CSS ファイルに印刷メディアのスタイルが含まれている点が異なります。
CSS ファイルで media="all" に関連付けられたスタイルは、画面表示、印刷、その他すべてのメディアに適用できるため、作成したすべてのスタイルをこのファイルに含めることができます。ページはすべてのメディア ファイルからすべてのスタイルを継承するため、media="print" に関連付けられた CSS ファイルだけをはるかに小さくできます。そのため、印刷メディア ファイルでそれらのスタイルを複製する必要はありません。
印刷メディア CSS ファイルで必要なスタイルは、印刷出力用にページ スタイルを変更または追加するスタイルのみです。一般に、これはグラフィックやナビゲーションコンテンツを含む div の表示を抑制し、body タグとメイン div の幅とマージンの設定を印刷出力に適した設定に置き換えるスタイルにすぎません。
このトリックが機能するのは、すべてのメディア CSS ファイルと印刷メディア CSS ファイルが同じカスケード スタイル ルールに結合されているためです。したがって、これらの CSS ファイルがリンクされる順序は非常に重要です。すべてのメディア ファイル リンクは、印刷メディア ファイル リンクの前に配置する必要があります。
印刷メディア CSS ファイルの使用に関するヒントをいくつか示します。
div の表示を無効にしたい場合は、visibility:hidden の代わりに display:none を使用します。
ポイント (pt) もインチ (in) も、画面表示では正しい測定単位ではありませんが、印刷出力では正しい測定単位です。
印刷メディア ファイルで使用するセレクターは、すべてのメディア ファイルで使用するセレクターとまったく同じである必要があります。たとえば、すべてのメディア ファイルで div#sidenav を使用して ID がsidenav の div を選択する場合、印刷されたメディア ファイルで #sidenav を使用すると、目的を正常に達成できない可能性があります。
あるファイルから別のファイルに変更するオーバーライド ルール宣言を明示的に強制することを忘れないでください。たとえば、すべてのメディア ファイルの要素にパディングを設定し、印刷出力でパディングを削除したい場合、印刷メディア ファイルのパディング宣言を無視するスタイルを追加するだけでは十分ではありません。パディングを明示的に設定する必要があります。 :0pt は前の設定を置き換えます。
Dreamweaver などのグラフィック エディタを使用している場合は、生成されたページを印刷出力としてではなく画面上でプレビューできます。 Dreamweaver のデザインビューウィンドウで印刷スタイルをプレビューするには、印刷メディア CSS ファイルへのリンクを media="screen" に変更します。これにより、印刷メディア ファイルの CSS スタイルをプレビューできるようになります。ページを公開する前に、メディア記述子を media="print" に戻すことを忘れないでください。
訪問者に印刷用の Web ページを提供する必要がある場合、元のページの別のバージョンを作成する必要はなくなりました。 XHTML/CSS ページは、media="print" メディア記述子を使用して CSS スタイルシートへのリンクを追加することで、印刷に適したページに変換できます。