Webページとプリントについて再考してみた

HTMLは基本的にはテキストをマークアップするための言語。性質上単調な構造となり、そのHTMLに対して、CSSを使用し色づけや段組などのレイアウト制御を行います。

けっこう枯れたテーマですが、Web制作者目線からの、プリントした際の挙動や傾向と対策などを再考。

画面上ではバッチリレイアウトされていても、印刷するとガタ崩れ…御社はこのクオリティなんですか？などと聞かれるとこのクオリティで作っているため、イロイロ考えさせられる部分があります。

環境の違い、設定の違いにより敷居が高い『見たままプリント』

テーブルレイアウト時代はガッチガチのレイアウト割なので、プリント崩れもまだマシでしたが、今現在の主流であるCSSレイアウトによる制御から、印刷時に画面との表示差違がでるようになりました。

プリントはブラウザ表示とは違い、ユーザーの設定に大きく依存します。

1. 背景画像の表示
2. ヘッダー・フッターの表示

1.背景画像の表示

基本的に『画面＝紙』を再現するならば、背景表示は必須です。Internet Explorerなど、デフォルトではオフになっているため、ひとまずココで要望の敷居が高くなります。当然ユーザー都合。

2.ヘッダー・フッターの表示

ユーザー側で、プリント設定でヘッダーやフッターを含めてプリントするケースも多いです。（サイト名やURLなど）
これにより、1枚の紙に納まる情報量が変動します。

また、ヘッダー、フッターを入れ込むことで改ページにも気をつかうようになります。中途半端な部分でページにまたがる場合、CSSで強制的に改ページをしたり、改ページを禁止したり。

記述例は以下

div {
	page-break-after: always;
}

コレの悩ましいところが、ユーザー設定のヘッダー・フッターのプリント有無でコンテンツが収まる領域が変動するということです。

ユーザー側の設定の変更や、コンテンツの更新により改ページが意図しないところで行われたりする場合があるので、ちょっと危険です。一部表示だけで紙を1枚使ったり。

Web制作会社のプリント

プリントの基本的な使いどころとしては、当然画面の情報を紙に出力して保存や持ち出し。みんなやっていることです。

しかしながら、Web制作会社のプリントのケースは『校正用』や『納品用』もあります。

校正用・納品用

HTMLとCSS、基本的にはスクリーン出力を最重要視して作成するケースが多いため、複雑なレイアウトや微調整時にはけっこうトリッキーなCSSを使用しちゃいます。

そのため、プリント時にはfloatがちょっとおかしな事になったり。

これ、画面と違うよ

なんてケースも少なくありません。
コレはコレで調整するとして、スクリーン表示の校正からいつの間にかプリント用校正に話がすり替わってしまいます。

紙ベースで校正するならば、やっぱり画面と同じイメージ

画面に対する校正なので、やはり、画面のイメージをそのままもっていくのが望ましいです。

Firefox アドオン
Pearl Crescent Page Saver

Firefoxのアドオンで、ブラウザー内の表示を見たまんまキャプチャして、ファイル化してくれます。png形式にも対応しているので、ロスレスで保存可能です。

さらに嬉しいのが、縦にスクロールしても全てのコンテンツを1ファイルに収めてくれるところ。Photoshopなどでの切り貼りが不要です。

Basic版とPro版がありますが、無料のBasic版で十分対応可能です。

プリントCSSの対応、技術的には

print.cssなど、プリント専用CSSを用意します。
読み込ませ方、書き方などのご参考

印刷用CSSをまとめてみた。 – TRANS

そもそもプリントに対応するレギュレーションを設定

キレイにプリントするとして、重要なのがどこまで対応するのかということになります。

1. 画面と同じく、見たままプリント
2. 必要な情報を整理して出力／不要な情報は非表示など、プリントに最適化した情報をプリント

だいたいとっちかになるかと。

1.画面と同じく、見たままプリント（完全表現）

コレの問題としては、ユーザー側の設定に依存する部分が多すぎるため、完全対応は現実的ではないというところです。

marginやpaddingのズレや飾り背景などを全ブラウザ、IEにおいては各種バージョンに対して調整することは至難の業です。ブラウザーごとにこれまた挙動が変わるため、ひとつひとつ潰していくという途方もない作業になります。Chromeに対してハックするなど思わぬ作業も出てきたり。

画面のサイズは決まっていますが、ブラウザーには“スクロール”という概念があり、データそのものがフレキシブルに増減します。これをまったく同じようにA4に収める、となるとWebページの構造そのものを見直す必要が出てくるため『Webサイト＝そのまま紙へ完全表現』は難しいです。

見たままプリントに関して難点をひとまずまとめると、

• 画面表示上は“見える領域”が限られているがスクロールするためコンテンツの面積は無限、紙はサイズ制限
• 画面は人間向け、紙は機械向けのため、制作アプローチが異なる
• 背景画像、背景色はユーザー設定に依存
• ユーザー設定によるヘッダー・フッターの表示により、コンテンツのプリント面積が変わる
• CSSだけの問題ではなく、HTMLまで干渉しないと調整がキビシイ場合がある
• それでも少しずつなんとか直っていくので妥協点が見つけにくい
• もうとにかくユーザー設定に依存する
• 地味な作業の割には多大な人的コスト

対策・提案策として、

• 完コピは求めないように説得する
• ブラウザごとのズレ（崩れではなく）は、事前にしっかり説明する
• 基準となる環境を決める（OS、ブラウザ）全部対応は非現実的

印刷専用のレイアウトを提供する

プリント専用CSSを準備すると、不要な部分を消したり、基本の書体を明朝系にするなど、制作者都合でプリント結果を提供することができます。

しかしながら、エンドユーザーはプリントアウト＝画面と同じモノを印刷で捉えているケースが多いはずで、プリント専用CSSを適用するその選択肢は必ずしも良策とは言えません。

参考になりそうなTips

• ページ内の印刷ボタンが押された時だけprint.cssを適応する

まとめ

1. 画面イメージ優先なのか、情報優先なのか、とりあえずクライアントの意向を根底に持ちつつ基本方針を固める
2. JavaScriptを併用するなどもよさそう
3. 完全再現は非現実的なので、“どこまですりあわせるか”を事前に約束
4. IE6はzoomプロパティを入れておけばなんとなく大丈夫そう
5. そもそもエンドユーザーにとっての良策は？も忘れない

関連する投稿

• Webページをプリントする際に、不要な部分を消してからプリントできる便利なブックマークレット