Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2005年4月22日
印刷用スタイル
フロントエンド・エンジニア 木達
CSSとメディアタイプにおいて、ミツエーリンクスのサイトでは多くのページでscreenのほかにprintメディア向けにスタイルを用意
していることをご紹介しました。printメディアに対応した閲覧環境であれば、印刷用スタイルを解釈し、意図した見栄えでもって出力することが期待できます。印刷用スタイルを作成するうえでのポイントは、いくつかあります。
まず最初に、ページ上に存在する個々の情報について、印刷すべきかどうか（printメディアに対して表示させるべきか否か）という判断が必要になります。画面上では機能しても、紙に出力した状態ではリンクとして機能しないナビゲーションの類などは、displayプロパティを使用して出力させないようにすることができます。
次に、テキストの大きさや色。印刷を前提としたときに適当な文字サイズに変更したり、あるいはモノクロプリンタで出力されることを想定し、十分な可読性を確保できるような配色にする必要があります。リンクが設定された文字列については特に、リンクの存在を紙面でどう伝えるかを検討すべきでしょう。望むなら、contentプロパティに対応しているブラウザに対しリンク先のURIを出力させることもできます。
そして、出力する対象の幅。紙に出力する場合、その用紙サイズというのはA4やB5といったさまざまなサイズが想定されます。さらに、そのサイズにおいてプリンタが実際に印刷できる領域というのは、プリンタのメーカーや型番、ユーザーの設定等によって異なります。できるだけ紙面を有効活用し、可能な限りその横幅を活かそうと考えた場合、コンテンツ全体の幅をピクセル単位で指定するのではなく、たとえばwidthプロパティで値に100%を指定すると良いでしょう。
Webサイトのなかには、印刷用と称して別個のhtmlファイルを用意したり、あるいはサーバサイドの技術を使って専用ページを出力しているケースがあります。しかしCSSを使って上記のポイントに配慮し、印刷用スタイルを用意すれば、特別なプログラムを動かす必要もなく、またhtmlファイルを増やす（＝運用上の手間を増やす）ことなく、印刷用スタイルを提供することが可能です。
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/24
コメントする