<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. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...
質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...
目次序文1. 何ですか2. Node.jsでEventEmitterを使用する方法3. 実施プロセス...
垂直方向では、ヘッダーの配置を上、中央、下に設定できます。基本的な構文構文Top は上、Middle...
#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....
目次これを Vue.$store.state.xx.xxストアからデータを取得する私のプロジェクトフ...
概要今日は主に、NGINX を Web サーバーとして設定する方法を共有します。内容は次のとおりです...
キャッシュを使用する目的は、バックエンドの負荷を軽減し、Web サイトの同時実行性を向上させることで...
時間に余裕を持って、過去を忘れましょう。前のセクションでは、[検索] フォームとクエリおよびリセット...
この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...
序文MySQL 5.1.6 以降、非常にユニークな機能であるイベント スケジューラが追加されました。...
最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...
コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...