印刷CSSを設定するための良いルールは？ [閉まっている]

StackOverflow https://stackoverflow.com/questions/401623

  •  03-07-2019
  •  | 
  •  

質問

ウェブページを印刷する際に適切な印刷CSSを作成するための提案/ルール/ガイドを探しています。提供するものはありますか？

役に立ちましたか？

解決

印刷の質を高めるために使用する一般的な印刷スタイルを次に示します。

/* Print styles */
@media print 
{
    tr, td, th {page-break-inside:avoid}
    thead {display:table-header-group}
    .NoPrint {visibility:hidden; display:none}
    a {color:#000000}
}

上の行は、テーブルの行内で改ページを防ぎます

theadスタイルは、テーブルがまたがる各ページに対してtheadタグの行を繰り返します。

NoPrintは、画面に何かを表示するために使用するクラスですが、印刷ではありません。

そして、リンクの色をオフにします。

他のヒント

印刷スタイルシートに入力する必要があることの1つは次のとおりです。

a[href^="http://"]:after{
    content: " (" attr(href) ") ";
}

これは、リンクテキストの横に実際のリンクを書き込むので、ドキュメントを印刷する人は、リンクがどこに行くのかを知ることができます。

また、本文をもう少し読みやすいように設定します：

body{
    font: 0.9em/1.5em Georgia, "Times New Roman", Times, serif;
}

最初にA List Apartからこの記事を読みます（ http://www.alistapart.com/articles/ goingtoprint / ）。彼らはあなたが探している基本の多くをカバーしています（リンクの拡大、白塗りなど）。

印刷プレビューに依存せず、印刷レイアウトをテストする際にプロセス全体を確認してください。紙を節約するには、SnagItをインストールするか、Microsoft XPSドキュメントライターを使用します。紙を無駄にすることなく、画像に直接印刷できます。

長い記事でも、フォントをセリフに変更することを検討してください。 Web上の記事はサンセリフ（Arial、Verdana）で読むのが最も簡単ですが、印刷物ではTimes New RomanまたはGeorgiaを試してください。

この古いが関連性のある Eric Meyerの記事がリストにあります。

主なポイントは、新たに開始し、境界線とmarging / paddingを0に明示的に設定し、白い背景にし、「何も表示しない」ことです。 （特定のメニューのように）印刷に不可欠ではない要素へ

<link rel="stylesheet"
   type="text/css"
   media="print" href="print.css" />

body {
    background: white;
    }

#menu {
    display: none;
    }

#wrapper, #content {
    width: auto; 
    margin: 0 5%;
    padding: 0; 
    border: 0;
    float: none !important;
    color: black; 
    background: transparent;
    }

そしてそこから行きます。

印刷のスタイルを定義するときは、紙の上で物理的な単位で考える必要があります。

  • マージンをセンチメートル（インチ）で設定し、フォントサイズをポイントで設定します（OpenOfficeと同様）。
  • 「screen」や「noprint」などのクラスを作成して、不要なものを簡単に削除できるようにします 素材。
  • 派手な色のテキストは忘れてください。白地に黒のテキスト。
  • 余分な画像を削除することを考えてください-白黒ではあまり良く見えないかもしれません
  • リンクから下線を削除し、リンクに正しいテキストを含めます。 「このページをチェック」を読むのは馬鹿げているようです。下線が引かれています。または、下線付きテキストの後にリンクのhrefを配置すると、より便利になりますが、見栄えはあまりよくありません。

背景画像と色に注意してください。 IEのデフォルトの動作は、背景画像や色を印刷しないことだと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top