CSSによるプリントデザイン

Webページは、HTMLという言語によって表現されます。HTMLの開発当初は、分散したコンピュータに存在する情報をナビゲートするために使用されていましたが、ブラウザの登場でWebページの見栄え・レイアウトが重要になってきました。

この結果、HTMLにレイアウトの要素・属性が入り込み、Webページの表現がコンテンツとレイアウトが混然一体としたものになってしまいました。

コンテンツとレイアウトが混然一体となっていると、WebページをPCの画面のような特定の媒体に表示する時は良いですが、それ以外の媒体に表示するのは不向きになってしまいます。

CSSはWebページの記述においてコンテンツとレイアウトを分離するために提唱されました。

Webページの中には、例えば、じっくり読みたい情報が提供されているものがあります。こうしたWebページは、紙に印刷することが望まれます。このようなWebの制作者は画面表示だけではなく、印刷を意識しなければなりません。

Webページによっては、印刷用の版（主にPDF）を別にリンクしていることがあります。これに対して、CSSのメディア特有のスタイルシート機能を使えば、印刷用の版を別途作らないで、一つの(X)HTMLを画面と印刷用に使うことができます。

印刷用のCSSの作成では次のような点を検討するべきでしょう。

• 印刷は用紙サイズがあり、その用紙サイズに最適なページデザインが必要。寸法は絶対寸法指定である。ブラウザで表示画面の解像度・サイズなどがばらばらなので絶対寸法指定は望ましくない。
• 折り返し。行の折り返し、段組などの段の折り返し。印刷では1ページの寸法の中で折り返す。ブラウザでは表示ウインドウの中で段の折り返しをしないと見ずらい。
• メニューなどのナビゲーション、検索ボックスなどの削除。
• フォントのサイズ。画面ではポイント指定は良くないと言われますが、印刷ではポイント指定が適切です。
• マージンのとり方
• 背景色や背景のイメージの扱い。画面には背景を表示し、印刷では背景を出さない。
• リンク（絶対リンク、相対リンク）。ブラウザの表示ではURLを表示する必要はないが、印刷ではURLを明示的に印刷したり、リンクのアンダーラインを削除する必要がある。
• マストヘッド（Webサイトの各ページの上部に表示されるロゴや共通要素）の扱い

CSS2では巻物のような表示媒体と、紙などのページの概念をもつ媒体のふたつの種類の媒体の概念が導入されています。このうちページ媒体については@pageルールを使って定義します。

@pageルールは、CSS2からCSS2.1にかけて、sizeプロパティが落とされるなど縮小されてしまいました。こうしたことから、現時点では、ブラウザの@pageサポートは弱く、PDFや専門の印刷のような高品質な印刷用ページのレイアウト指定はできません。

CSS3ではページ媒体向けのレイアウト指定機能が大幅に強化されており、CSS2.1ではできないような高度な印刷レイアウト指定ができるようになります。これにより画面表示と印刷をCSSで統合したWebページの制作が可能となります。

CSS3で高度な印刷レイアウトをしたとき、それを実際に印刷したりPDF化するには、CSS3をサポートする組版ソフトウェアが必要です。この一つがAntenna House Formatter V5 です。

DTPはWeb時代に対応できない

WYSIWYG（What You See Is What You Get）は、1980年代Macintoch上のDTPソフトと共に一世を風靡する流行語として登場しました。そして４半世紀を経過した現在、DTPは常識となりました。しかし、DTPには大きな欠点があります。それはWebコンテンツの時代に対応できていない、ということです。

Webページは、ほとんどの場合、見たままを印刷に出しても良い印刷物になりません。Webページはナビゲーションが主な目的ですので、印刷は表示と違えるべきWhat You Get Should Be Different From You Seeです。

DTPでは、多くの場合、印刷物の制作とWebの制作は別々の工程となります。コンテンツ制作の効率をあげるには、一種類のコンテンツをつくるだけで Web版と印刷版を制作したいのですが、残念ながらWYSIWYGを本性とするDTPは、この時代の要請に応えることができません。

CSS3でWeb版と印刷版を統合する

現在、多くの制作物はWeb版と印刷版が求められます。Web版と印刷版を一度に作りたい、Webを綺麗に印刷したいとお考えの制作者・開発者は多いと思います。

現在開発中のCSS3で大幅に強化される印刷レイアウト指定機能を使うと、Webページそのものに綺麗な印刷レイアウト指定ができます。すなわち、一つのWebページにブラウザ向けの画面表示レイアウトと、高品質な印刷レイアウトを同時に指定できます。

CSS3で高度なページレイアウトを指定できるようになれば、HTMLでWebページを作り、それにCSS3でPDFなど印刷媒体用のレイアウト指定ができます。Webページをそのまま印刷物にできるのです。CSS3の普及によって、もはやDTPはその役割を終えつつある、と言っても過言ではないでしょう。