キーテイクアウト

プリンターに優しいページの重要性：デジタル時代にもかかわらず、プリンターに優しいWebページが非常に必要です。 Webページの印刷は、旅行チケットの印刷、オフラインの読書、画面の使用が困難だと思う人にアクセス可能な情報を提供するなど、さまざまな目的に不可欠です。この記事は、アクセシビリティとユーザーエクスペリエンスを向上させるために印刷用のWebページを最適化する必要性を強調しています。

1. css for print：cssは、Webページをプリンターに優しいものにする上で重要な役割を果たします。この記事では、CSSを使用して、印刷時にWebコンテンツが最適な形式で表示されることを保証する印刷スタイルシートを作成する方法を概説しています。これには、印刷に特定のメディアクエリの使用、レイアウトとスタイルの調整、印刷ページが読みやすく、よく組織化されていることを確認することが含まれます。

2. 実用的なヒントとテクニック：この記事は、効果的な印刷スタイルシートの作成に関する豊富な実用的なアドバイスを提供します。重要な推奨事項には、不要な要素の削除、レイアウトの線形化、適切なフォントとサイズの使用、ページの休憩の管理、印刷バージョンの補足コンテンツが含まれます。これらのヒントは、Web開発者が自分のサイトを簡単かつ効率的に印刷し、Webコンテンツの完全性を維持しながらインクと紙を保存できるようにするのに役立ちます。

3. 印刷にCSSが必要なのはなぜですか？
   「誰がWebページを印刷しますか？」私はあなたが泣くのを聞きます！比較的少数のページが紙に再現されることがあります。しかし、考えてみてください：

旅行またはコンサートチケットの印刷

• 接続性が低い領域での情報へのアクセス
危険な状態や汚れた状態でデータを使用する - たとえば、キッチンや工場など
• 書面による注釈のドラフトコンテンツの出力
簿記目的でWeb領収書を印刷
画面を使用するのが難しいと感じる障害のある人にドキュメントを提供する
この新しいファングルされたt’internet nonsenseの使用を拒否している同僚のページを印刷します。
残念ながら、ページを印刷することはイライラする経験になる可能性があります：
• テキストが小さすぎる、大きすぎる、またはかすかすぎる

• インクは、不必要な色付きの背景と画像に無駄になります
• リンクURLは見えません
• アイコン、メニュー、および広告が印刷されているため、クリックすることはできません！
多くの開発者はWebのアクセシビリティを提唱していますが、印刷されたWebにアクセスできることを忘れないでください！

応答性のある連続メディアを、あらゆるサイズと方向のページング紙に変換することは困難です。ただし、CSSプリント制御は長年にわたって可能であり、数時間以内に基本的なスタイルシートを完成させることができます。次のセクションでは、ページをプリンターに優しいものにするための十分にサポートされた実用的なオプションについて説明します。

スタイルシート

を印刷します

cssの印刷は、次のいずれかです

画面スタイリングに加えて

適用されます。画面スタイルをベースとして取ると、プリンタースタイルは必要に応じてそれらのデフォルトをオーバーライドします。

別のスタイルとして適用されます。画面と印刷スタイルは完全に別々です。どちらもブラウザのデフォルトスタイルから始まります
選択はサイト/アプリに依存します。個人的には、ほとんどの場合、画面スタイルを印刷ベースとして使用しています。ただし、画面上の時刻表グリッドを表示した会議セッション予約システムなど、紙には時系列のスケジュールなど、根本的に異なる出力を持つアプリケーションに個別のスタイルシートを使用しました。
2. 標準スタイルシートの後、html に印刷スタイルのシートを追加できます：

print.cssスタイルは、ページが印刷されているときに画面スタイルに加えて適用されます。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

印刷レイアウトをテストするたびに、木を殺し、とてつもなく高価なインクを使用する必要はありません！次のオプションでは、画面上で印刷スタイルを再現します

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

最も信頼できるオプションは、ブラウザの印刷プレビューオプションです。これは、デフォルトのペーパーサイズを使用してページブレイクが処理される方法を示しています。

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

開発者ツール

devtools（

または

i

Chromeで、開発者ツールを開き、より多くのツールを選択し、右上の3ドットアイコンメニューからレンダリングします。エミュレートCSSメディアを変更して、そのパネルの下部に印刷します。 Firefoxで、開発者ツールを開き、[Inspectorタブのスタイル]ペインのトグル印刷メディアシミュレーションアイコンをクリックします。 メディア属性をハッキングします タグを使用してプリンターCSSをロードすると仮定すると、メディア属性を画面に一時的に変更できます。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

繰り返しますが、これはページの休憩を明らかにしません。テストが終了したら、属性をメディア= "print"に復元することを忘れないでください。

不要なセクションを削除します

他のことをする前に、ディスプレイで冗長コンテンツを削除して崩壊します。紙の典型的な不要なセクションには、ナビゲーションメニュー、ヒーローイメージ、ヘッダー、フッター、フォーム、サイドバー、ソーシャルメディアウィジェット、広告ブロック（通常はiframe内のもの）が含まれます：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

ディスプレイを使用する必要がある場合があります：なし！重要。 CSSまたはJavaScript機能が特定のUI状態に従って要素を示している場合。 ！重要を使用することは通常は推奨されませんが、画面をオーバーライドするプリンタースタイルの基本セットでの使用を正当化することができます。 レイアウトを線形化

白い背景に暗いテキストを使用していることを確認してください
セリフフォントの使用を検討してください。
• テキストサイズを12pt以上に調整します
• 必要に応じてパディングとマージンを変更します。標準のCM、MM、またはユニットの方がより実用的かもしれません。
さらに提案には…

CSS列を採用

標準のA4および米国の文字論文は、より長くて読みやすいテキストの行をもたらす可能性があります。印刷レイアウトでCSS列を使用することを検討してください。たとえば、

この例では、少なくとも37emの水平空間があるときに列が作成されます。メディアクエリを設定する必要はありません。追加の列がより広い紙に追加されます。

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

ユーザーは、装飾的な画像や非必須画像や背景を印刷したくありません。印刷クラスがない限り、すべての画像が非表示になる場合はデフォルトを考慮することができます。

理想的には、印刷された画像は明るい背景に暗い色を使用する必要があります。 CSSでHTML埋め込みのSVG色を変更することは可能かもしれませんが、暗いビットマップがある状況があります：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

CSSフィルターを使用して、印刷スタイルのシートの色を反転および調整できます。たとえば、

結果：

補足コンテンツを追加

印刷されたメディアには、画面上で必要ない追加情報が必要です。 CSSコンテンツプロパティを使用して、テキストを:: :: :: pseudo-elementsに追加できます。たとえば、テキストの後に括弧内にリンクのURLを表示します：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

または印刷のみのメッセージを追加できます：

<span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

より複雑な状況については、印刷時にのみ表示する必要がある要素に印刷などのクラスを使用することを検討してください。たとえば、

<span>/* main.css */
</span><span>body {
</span>  <span>margin: 2em;
</span>  <span>color: #fff;
</span>  <span>background-color: #000;
</span><span>}
</span>
<span>/* override styles when printing */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

css：

<span>/* main.css */
</span>
<span>/* on-screen styles */
</span><span><span>@media screen</span> {
</span>
  <span>body {
</span>    <span>margin: 2em;
</span>    <span>color: #fff;
</span>    <span>background-color: #000;
</span>  <span>}
</span>
<span>}
</span>
<span>/* print styles */
</span><span><span>@media print</span> {
</span>
  <span>body {
</span>    <span>margin: 0;
</span>    <span>color: #000;
</span>    <span>background-color: #fff;
</span>  <span>}
</span>
<span>}
</span>

注：ほとんどのブラウザは、印刷されたページのヘッダーおよび/またはフッターにURLと現在の日付/時刻を表示するため、この情報をコードで生成する必要はほとんどありません。 ページが壊れます

CSS3のプロパティは、壊れてから壊れた状態で、ページ、列、または領域の破損が要素の前後に動作する方法を制御できます。サポートは優れていますが、古いブラウザは、同様のページブレイク前とページブレイク後のプロパティを使用する場合があります。

• 回避ページ：ページブレイクを避けてください
• ページ：ページブレークを強制します
• 常に：ページのエイリアス
• 左：フォースページが壊れるので、次のページは左ページです
• 右：フォースページが壊れるので、次のページは正しいページです
例：

見出しの直前にページブレークを強制します：

注：ページブレークを使用することに注意してください。理想的には、プリンターの出力はできるだけ少ないページを使用する必要があります。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="screen"</span> href<span>="print.css"</span> /></span>
</span>

auto：デフォルト - ブレークは許可されていますが、強制されていません

これは、テーブルや画像などのグループ化されたデータ内でページの切断を避けながら、できるだけ少ない紙を使用できるため、ページのブレークを指定するよりも望ましい場合があります。
未亡人のプロパティは、ページの上部に表示する必要があるブロック内の最小行数を指定します。 5行のテキストがあるブロックを想像してください。ブラウザは、4行目の後にページを切断したいので、最後の行が次のページの上部に表示されます。未亡人の設定：3; 2行目以前にブレークされるため、少なくとも3行は次のページに持ち越されます。
孤児の財産は未亡人に似ていますが、ページの下部に表示する最小行数を制御します。

• スライス：デフォルトはレイアウトを分割します。上部の境界は最初のページに表示され、下の境界線は2番目のページに表示されます。
クローン：マージン、パディング、境界線を複製します。 4つの境界すべてが両方のページに表示されます
最後に、CSS Paged Media（@Page）はブラウザのサポートが限られていますが、特定のページをターゲットにする方法を提供しているため、代替マージンまたはブレークを定義できます。

CSSページブレイクプロパティは、印刷にのみ影響するため、画面または印刷スタイルに配置できますが、明確にするために印刷CSSで使用することをお勧めします。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="main.css"</span> /></span>
</span><span><span><span><link</span> rel<span>="stylesheet"</span> media<span>="print"</span> href<span>="print.css"</span> /></span>
</span>

プリンターに優しいスタイルシートは、任意のサイトにレトロフィットできます

ほとんどのプリンタースタイリングは、ブラウザの大部分で動作します

印刷スタイルは、既存の機能に影響を与えたり壊したりしません
開発コストは最小限です
いくつかのページの休憩を追加し、不要なセクションを削除すると、ユーザーを歓迎し、競合他社よりもサイトを上げます。
• To-Doリストに追加してください！
より高度なCSS知識については、私たちの本を読んでください
• CSS Master、第3版
。

を使用してプリンターに優しいページを作成することに関するFAQ CSSプリントStyleSheetの作成は、印刷時にWebページの外観を制御するために重要です。 CSSを使用してプリンターに優しいページを作成する方法について、よくある質問のいくつかをカバーして終了しましょう。 印刷のCSSとは？

ブラウザからWebページを直接印刷することは可能ですが、印刷されたWebページは、画面に表示されるページのようには表示されないことがよくあります。 WebページはCSSでスタイリングされており、CSSを使用して印刷ページにスタイリングを提供することもできます。ただし、通常、Webページのスタイルは印刷によく翻訳されていないため、印刷されたページ専用にCSSスタイルを作成することが重要です。 PrintのCSSは、プリンターが印刷ページのレイアウトをフォーマットするのに役立つように特別に設計された一連のスタイルです。 印刷にCSSを使用するにはどうすればよいですか？

CSSプリントStyleSheetをセットアップするにはどうすればよいですか？

CSSで印刷スタイルを提供する2つの基本的な方法があります。別のスタイルシートを介して、またはメディアクエリを介して。 CSSプリントスタイルは、ドキュメントの

印刷バージョンの特定の要素を非表示にするにはどうすればよいですか？

ディスプレイプロパティをなしに設定することにより、CSSを使用して印刷バージョンの特定の要素を非表示にできます。たとえば、

@media print {
.hide-on-print {ディスプレイ：なし;
}

ページブレイク前とページブレイク後のCSSプロパティを使用して、ページブレイクを指定できます。たとえば、

@media print {
.page-break { page-break-before：wearte;
}
}

@page {
マージン：1cm;
}

画像や背景の色が印刷されないようにするにはどうすればよいですか？

以上がCSSを使用してプリンターに優しいページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。