<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/クロスホストコンテナ相互アクセス操作
1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...
目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
VMware のインストールパッケージのインストールダウンロードアドレス: https://www....
1. mysqlbinlog: [エラー] 不明な変数 'default-character...
Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...
序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...
目次方法1 1. 構成とインストールの手順:方法2方法3要約する方法1 1. 構成とインストールの手...
まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...
最近、Web ページに複数の画像をアップロードするためのスクリプトを作成しました。これは非常に実用的...
HTML では、<、>、& などは特別な意味を持ち (<、> はリン...
Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...
大量のデータベース データを最適化することは非常に高度な科学であり、開発者が習得する必要がある専門的...