BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

印刷用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;}

スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。