I love software!

CSS スタイルシートではルールの組み合わせを適用する対象媒体を@media で指定します。

ページ媒体向けのルールは@media print を、画面表示向けのルールは@media screen を指定します。

この機能を使って、Webページを印刷するときに、レイアウト指定を切り替える例はブログなどでたびたび紹介されています。

ブログであまり取り上げられていない項目に、表示と印刷の時のマージンの問題があります。

これを説明する前に、次の図をご覧ください。
□ボックスの表示と印刷

CSS ではテキスト、図、表などの組版対象物はボックスとして配置されます。最下位の文字列を含むボックスから最上位のルート要素のボックスまで階層になります。出力先が画面のときはルート要素のボックスをウインドウに表示します。出力先がページ媒体のときはページボックスでページの雛形を設定し、ページ上に他のボックスを配置します。

□ページのマージンとbodyのマージン
ページのマージンは、各用紙の周囲に取られます。
bodyのマージンは、文書全体の周囲に取られます。
両方にマージンを指定すると、印刷ではマージンがその合計になってしまいます。

例えば、bodyの上マージンは、先頭ページ上マージン（のみ）に追加されます。
このことを考えますと、マージン指定は次のように切り替えるのが良いと思います。

@page {
margin:10% /*10%のマージンを仮に取るとして */
}
@media print { /* ページ媒体に適用 */
　body {
margin: 0%;
} }

@media screen { /* 画面表示に適用 */
body {
　margin: 10%;
　} }

HTMLをブラウザで表示して、印刷にはAH Formatterを使うときの話しです。

※ブラウザ印刷機能は@pageルールをほとんどまともに実装していないので、ブラウザで印刷する限りは、あまり関係ありません。

Webはその起源と、PCのディスプレイ上でブラウザでビジュアルにページをナビゲートする方向で発展したという初期の経過から画面表示が主体になっており、印刷はほとんど忘れられています。

特に、最近はWebが企業の広告媒体化したために、Flash、JavaScriptでビジュアルなデザインが流行っています。

こうしたこともあり、Webデザイナは、ビジュアルデザインの研究はしても印刷の研究はおろそかなようです。各種の書籍にも、デザインの方法は書いてあっても印刷に関する解説はあまりありません。

それは、また、レイアウト指定言語CSSの印刷レイアウト指定機能のレベルが低く、一方で、ブラウザの印刷機能の実装があまりに貧弱である、ということも一つの原因です。

この結果、ほとんどすべてのWebユーザが印刷については悩んでいるという事実があります。Webの印刷機能に満足しているユーザは皆無と言っても良いのではないでしょうか。

こういう事実を、ソフトウェア・ベンダもWeb制作者も謙虚に反省する必要があるように思います。

CSS3の印刷レイアウト指定機能はDTP並みとはいかなくてもDTPに近いところまで進みつつあります。
「AH FormatterV5.0」のCSS3機能ですべてのWebユーザに福音となりたいものです。

どうしたら、簡単にCSS3の便利さを体験していただけるかと頭をひねりました。

そこで、思いついたのがCSSPrintボタンです。

こちらで公開しています。

http://www.antenna.co.jp/AHF/

右上の［CSSPrint］ボタンを押すと数秒で

普通のWebページがCSS3でPDFになります。
※［CSSPrint］→［PDFに出力］に変更しました。