印刷用スタイル

CSSとメディアタイプにおいて、ミツエーリンクスのサイトでは多くのページでscreenのほかにprintメディア向けにスタイルを用意していることをご紹介しました。printメディアに対応した閲覧環境であれば、印刷用スタイルを解釈し、意図した見栄えでもって出力することが期待できます。印刷用スタイルを作成するうえでのポイントは、いくつかあります。

まず最初に、ページ上に存在する個々の情報について、印刷すべきかどうか（printメディアに対して表示させるべきか否か）という判断が必要になります。画面上では機能しても、紙に出力した状態ではリンクとして機能しないナビゲーションの類などは、displayプロパティを使用して出力させないようにすることができます。

次に、テキストの大きさや色。印刷を前提としたときに適当な文字サイズに変更したり、あるいはモノクロプリンタで出力されることを想定し、十分な可読性を確保できるような配色にする必要があります。リンクが設定された文字列については特に、リンクの存在を紙面でどう伝えるかを検討すべきでしょう。望むなら、contentプロパティに対応しているブラウザに対しリンク先のURIを出力させることもできます。

そして、出力する対象の幅。紙に出力する場合、その用紙サイズというのはA4やB5といったさまざまなサイズが想定されます。さらに、そのサイズにおいてプリンタが実際に印刷できる領域というのは、プリンタのメーカーや型番、ユーザーの設定等によって異なります。できるだけ紙面を有効活用し、可能な限りその横幅を活かそうと考えた場合、コンテンツ全体の幅をピクセル単位で指定するのではなく、たとえばwidthプロパティで値に100%を指定すると良いでしょう。

Webサイトのなかには、印刷用と称して別個のhtmlファイルを用意したり、あるいはサーバサイドの技術を使って専用ページを出力しているケースがあります。しかしCSSを使って上記のポイントに配慮し、印刷用スタイルを用意すれば、特別なプログラムを動かす必要もなく、またhtmlファイルを増やす（＝運用上の手間を増やす）ことなく、印刷用スタイルを提供することが可能です。