エントリー記事
スポンサーサイト
印刷用CSSの導入
Webの普及により、いつでも多くの情報にアクセスすることが可能になりました。ところが、情報を記録する手段として、今もなお紙は根強い人気を誇っています。
- 手軽に持ち運びが可能
- 加筆、マーキング等の編集が容易
- 目への負担が軽い
このような理由により、Webサイトは印刷される可能性があります。しかし、ディスプレイでの閲覧に最適化されたWebサイトをそのまま印刷しても、次のような問題を引き起こすことが考えられます。
- 横幅が大きくて納まらない
- テキストが小さくて読みづらい
- カラーインクを無駄に使わせる
- 使用しているフォントによっては読みづらい
- メニュー等の不要な部分を含む
これらは、印刷用のCSSを適用することで解決できます。適用方法は次の通りです。
- 複数の外部CSSファイルを使用
-
自分のホームページ領域を持っている、或いはCSSファイルのアップロードが可能なスクリプトを使用している場合に、この方法を用いることができます。
ページの見栄えを指定するCSSファイルをdesign.cssとします。これとは別に印刷用のCSSファイルを用意し、これをprint.cssとします。link要素を用いて次のように記述します。
<link rel="stylesheet" type="text/css" href="design.css" media="screen,tv" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />media属性を用いることで、CSSファイルの適用先を振り分けることができます。この例では、design.cssをパソコンのディスプレイとテレビ画面に、print.cssをプリンタに適用しています。
- 1つのCSSをメディア別に振り分けて使用
-
CSSを編集することはできるがファイルのアップロードを許可していないスクリプトを使用している場合に、この方法を用いることができます。
見栄え関連の項目と印刷関連の項目を、@media宣言を用いて分割します。
@media screen,tv{ /*見栄え関連の項目を指定*/ }@media print{ /*印刷関連の項目を指定*/ }@media宣言を用いることで、1つのCSSをメディア別に振り分けることができます。この例では、見栄え関連の項目をパソコンのディスプレイとテレビ画面に、印刷関連の項目をプリンタに適用しています。
印刷用にCSSを定義する場合、次の点に注意しましょう。
- A4用紙で印刷可能な横幅に
- 印刷可能な横幅は680px以下と言われています。当ブログでは、印刷時の横幅を650pxとしています。
- テキストのサイズは大きめに
- テキストのサイズは最低12pt(pxではない)以上に指定しましょう。ビジネス界では当然のことですね。
- カラーインクを無駄に使わせない
- 印刷物の場合、白地に黒文字が一番読みやすくなります。背景色は白で背景画像は指定せず、テキストの色は黒を推奨します。これにより、モノクロプリンタでも問題なく印刷できます。
- フォントは明朝体に
- 印刷物の場合、ゴシック体よりも明朝体の方が読みやすくなります。
- 不要な部分は非表示に
- メニューや画像等、不必要なものを非表示にします。
#menu,img{display:none;}