web-dev-qa-db-ja.com

印刷用のWebページのフォーマット

しばらくの間、Webページを印刷用にフォーマットする正しい方法について疑問に思っていました。

私の見解では、それらはWYSISWYGである必要があります。

そうでなければ、BBCのWebページからこのページに示されている状況がわかります。印刷を押すと、興味深い図が失われます。

http://www.bbc.co.uk/news/uk-17365934

そして、私はまた、非フォーマットを無駄にする紙の量が増加しているように見えます：このページで示されているように：

http://www.sciencemuseum.org.uk/visitmuseum/gettinghere.aspx

だから問題は、Webページを印刷用にどのようにフォーマットする必要があるかです

printing
6
PhillipW

一部のユーザーはWebページを印刷したいので、印刷用にページをフォーマットすることは不可欠です。その一例は、調理時の周囲の環境がラップトップやタブレットに適していないという理由だけでの調理レシートです。

技術的に言えば、 print CSS を指定する必要があります。また、おそらく "Printer friendly version"ボタンも指定する必要があります。ボタンは本当に必要ではありませんが、オプションであり、対象となる視聴者とコンテキストに依存します。

一部のユーザーは画像を希望し、他のユーザーはテキストコンテンツのみを希望するため、画像も困難です。画像付き印刷用と画像なし印刷用の2つのボタンを追加すると、簡単に煩雑になります。

この状況にはさまざまなケースがあるので、テストは先の方法です。テストの準備（または管理/リーダーシップがテストを承認しない場合）ペルソナが別のユースケースを試すこともできます。

Webページは、対象読者をサポートする方法で印刷用にフォーマットする必要があります。

3
Benny Skogberg

これに対する「正しい」答えはありません。いくつかの考慮事項：

  • そのまま印刷できるようにします。長所：努力は必要ありません。短所：意図したとおりに印刷されることはめったにありません。
  • 印刷バージョンをカスタマイズするには、print cssを使用します。長所：印刷用にカスタム設計されています。短所：ブラウザーに表示されるように、ユーザーがそれを望む場合があります。
  • 印刷用バージョンのページをブラウザー内ページとして使用します。長所：人々は画面上で印刷に適したものを使用できます。短所：バックエンドの開発作業が必要です。

私は通常、ページの「印刷用」バージョンを提供できるときは常に3番目のオプションを好みます。概念は、ユーザーが最初にそれを表示できるようにブラウザーにそのcssをロードすることを除いて、print cssに似ています。コンテンツが豊富なサイトの利点は、多くの人が画面上での閲覧にも印刷用バージョンを好むことです（ナビゲーション/広告などではなく、ページのコンテンツに重点を置く傾向があるため）。

さらに、ユーザーはプリンターで何が印刷されるかを確認できるという利点があります。強制印刷プレビューの一種。

1
DA01

優れたレスポンシブデザインについて概説したアプローチのいくつかを使用し、それに応じて調整します。印刷は、モバイル、デスクトップ、タブレットなどの単なる別のフォーマットです。

まずはすべてを削除してから、絶対に必要なものについて考えます。ナビゲーション、ツールバー、ボタンはそうではありません。 A4用紙に収まる大きなテキストサイズです。グレイスケールのフルカラーロゴの交換をご覧ください。大量のテキストにリンクを埋め込むのではなく、次のようなCSSルールを使用できます。

a:after {
    content: " (" attr(href) ") ";
}

HTMLリンクの直後の（http://ux.stackexchange.com/）のようなテキストの後にリンクを配置します。

1
Tom

最新のブラウザーはすべてデフォルトで背景画像と色をオフにしているため、常にWYSIWYG印刷を実現できるとは限りません。

それは常にブランドの一貫性/親しみやすさと実用主義の間の微妙なバランスです。印刷されたドキュメント内のリンクをクリックしたり、特定のフォームコントロールを操作したりすることはできないため、印刷時にリンクを非表示にすることは理にかなっています。

CSSは、印刷されたページの外観、特に改ページの周囲を作成者が定義するのに役立つ一連のプロパティを提供します。悲しいことに、これらのプロパティは一般的にブラウザで十分にサポートされていません。一般に、印刷されたページはサイトのブランドと表示されているコンテンツに限定されるべきであるというコンセンサスがあるようです。これは親しみやすさを損なう可能性がありますが、賭けをヘッジするのではなく、決定的に行います。当然、このモデルはFacebookニュースフィードのような一時的または一時的な情報よりも記事ベースのコンテンツに適しています。

印刷スタイルシートのデザインを扱った素晴らしいA List Apart記事 を読む価値があります。

0
Kit Grose

既存のページを印刷するつもりなら このWebサイトを試す必要があります 。印刷用のWebサイトを開発する方法を探している場合は、別の方法を検討してください。

私はこのウェブサイトとは関係ありませんが、とても役に立ちました。特に、広告を削除して、表示するdivを選択できるためです。外部にレンダリングされたグラフとチャートも印刷されます。

それは試みに値します。

0
user112594