XHTML CSS ページをプリンタページに変換する

<br />これまで、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレイアウトと書式を変更した別のページを設計する必要がありました。今では、構造化された XHTML と CSS を使用することで、はるかに少ない労力で同じ効果を実現できます。
画面表示から印刷まで、ほとんどの Web ページはコンピュータの画面で表示されるように設計されています。ただし、長期記録を保存したり、便利なオフライン参照として使用したりするために、特定のページを印刷する必要がある場合もあります。
問題は、Web ページをカラーのコンピュータ画面上で印象的でカラフルに見せる機能の多くが、Web ページの印刷版では同じようには機能しないことです。特にプリンターが白黒の場合に顕著です。色の組み合わせはグレースケールにダウングレードするとコントラストが失われ、グラフィックは歪んで見え、印刷に時間がかかりすぎます。また、Web ページでは非常に重要なナビゲーションボタンは、印刷されたページでは役に立ちません。
これらの問題を克服するために、Web 作成者は多くの場合、訪問者が印刷したくなるような、印刷に適したバージョンのページを設計します。印刷に適したバージョンには通常、メインの Web ページと同じコンテンツが含まれますが、ほとんどのグラフィック、背景、ナビゲーション要素は省略されます。このページでは、色を何らかの形式に変換して、許容可能なグレースケール画像も生成します。
CSS ソリューション構造化された XHTML マークアップと CSS フォーマットを使用してコンテンツをプレゼンテーションから分離する利点の 1 つは、CSS スタイルを変更することでコンテンツを簡単に再フォーマットできることです。したがって、プリンタ対応ページを作成するには、同じ XHTML ページに別の CSS ファイルをリンクするだけです。
画面スタイルシートと印刷スタイルシートの両方を同じ XHTML ドキュメントにリンクできるため、プリンター対応ページを別途作成する必要はなく、プリンター対応スタイルシートのみを作成します。リンクコードにマルチメディアファイルを追加すると、画面出力ではどの CSS ルールに従うか無視するか、また印刷出力ではどのルールを使用するかをブラウザーに指示することになります。
以下は、CSS ファイルのペアへのリンクの例です。
引用内容は以下のとおりです。
<linkrel="スタイルシート"type="text/css"media="screen"href="mysite-screen.css"/>
<linkrel="スタイルシート"type="text/css"media="print"href="mysite-print.css"/>
古いブラウザをサポートする必要がある場合は、CSS1 メディア記述子の画面と印刷を使用する必要があります。これらは相互に排他的であるため、ブラウザは画面表示用のページを生成するときに印刷スタイルシートを無視し、その逆も同様です。したがって、各スタイルシートには同じスタイルセレクターを含める必要がありますが、異なる出力デバイスのページスタイルを生成するには、異なるルール宣言を含める必要があります。
CSSを簡素化する
古いブラウザのサポートを放棄し、ユーザーが CSS2 をサポートするブラウザ (IE5 以上または Netscape 6 以上など) を使用していると想定する場合は、新しい all media 記述子を使用することで CSS コードを大幅に簡素化できます。
以下は CSS2 メディア記述子を使用したリンクの例です。
引用内容は以下のとおりです。
<linkrel="スタイルシート"type="text/css"media="all"href="mysite-all.css"/>
<linkrel="スタイルシート"type="text/css"media="print"href="mysite-print2.css"/>
これらのリンクは以前とほぼ同じですが、違いは 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 を使用しても目的を達成できない可能性があります。
あるファイルから別のファイルに変更されるルール宣言のオーバーライドを明示的に適用することを忘れないでください。たとえば、すべてのメディアの要素にパディングを設定し、印刷出力でそれを削除する場合、印刷メディアファイルにパディング宣言を無視するスタイルを追加するだけでは不十分です。以前の設定を上書きするには、明示的に padding: 0pt を設定する必要があります。
Dreamweaver などのグラフィックエディターを使用している場合は、生成されたページを印刷出力ではなく画面に表示される形でプレビューできます。 Dreamweaver のデザインビューポートで印刷スタイルをプレビューするには、印刷メディア CSS ファイルへのリンクを media="screen" に変更します。これにより、印刷メディアファイル内の CSS スタイルをプレビューできます。ページを公開する前に、メディア記述子を media="print" に戻すことを忘れないでください。
訪問者にプリンタ対応の Web ページを提供する必要がある場合、元のページの別のバージョンを作成する必要がなくなります。 media="print" メディア記述子を含む CSS スタイルシートへのリンクを追加することで、任意の XHTML/CSS ページをプリンタ対応ページに変換できます。

<<: Reactはグローバル箇条書きボックスメソッドをカプセル化します

>>: Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作