CSSを使うサイトは多くなったが、印刷用CSSについてはブラウザの実装がぐちゃぐちゃなせいで、あまりまじめに扱われてきていないのが現状だ。用紙の余白は制作者が決めることができないし、1ピクセルが何ミリメートルになるのかは解像度によって変わることがあるし、ページ送りまわりでは各ブラウザが工夫を凝らして、またはあまり考えていなくて、いろいろ変なことが起きる。
ただ、だから何もしない、screenメディアと同じ、というのはもったいない。複数のメディアに対応できるCSSのメリットを活かすためにも、2007年末の実装をベースとして、基本をまとめておこう。なので、今回のタイトルは「印刷用CSSの書き方（基本編）」。応用編は、今は使い物にならないorphans, widowsの実装が進んで、印刷用floatレイアウトができるようになったら考えることとする。
サンプルとして、デザインテンプレート0710rのサンプルにprint用CSSを適用してみた。参考にしてほしい。
以下、具体的な解説を行う。多分に自分の好みも入っているので、適宜変えてほしい。
0. 印刷用にCSSファイルを用意してlink要素で呼び出す。CSSファイル中の@media print{}に記述する手もあるが、Mac IE5は@media print{}の中身をすべて無視するし、WindowsのIE5は@media print{}の中身をscreenメディアにも適用してしまう。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />1. 必要ない部分はすべてとりのぞく。理想的には、（ブラウザが入れるヘッダ、フッタを除けば）単体の文書として意味が通るようにするといい。たとえば、グローバルメニュー、パンくずリスト、サイドバー、ページの先頭へのリンクなどは消し、ロゴ、フッターのコピーライトは残す。
2. フォントについて。おすすめは全体にserifを指定し、見出し、dt、thとリンクアンカーをsans-serifにするものだ。IE6ではserifだけ指定してもうまくいかないことがあるので、たとえばＭＳ Ｐ明朝を直接指定する。気になる人はsans-serif系の指定にも"メイリオ", "ＭＳ Ｐゴシック"を入れよう。
そのまま太字にするとやぼったくなってしまうことが多いので、font-weightはnormalとし、フォントの違いでなんとかstrongやthやdtを表現する。vertical-align: 0;はline-heightをあわせるためのおまじないだ。
色は、serifは黒、sans-serifはカラーまたはグレーにするときれいだ。背景色・背景画像は印刷しない設定にできるので、テキストにcolor: whiteは使わない。IE6などは薄い文字色は自動的にグレーに変換してくれる。モノクロプリンタでもちゃんと印刷できるよう、色のみで区別するのは避けたほうがいいが、かといってすべてグレースケールにすることもない。ガンガン色を使おう。
* {
font-family: "ＭＳ Ｐ明朝", serif;
vertical-align: 0;
}
h1, h2, h3, th, dt, strong, a, #logo a, #footer ul li {
margin: 0;
padding: 0;
font-family: "Century Gothic", Arial, sans-serif;
font-weight: normal;
color: #5d4442;
}3. bodyへの指定。背景色はもちろん白。横幅は100% or max-width/min-widthで調整する。たとえば、IE6には100%、その他フルブラウザには165mmを基準とし、さらにmax-width/min-widthを追加する。これで、A4縦以外の用紙にもそれなりに対応できるし、A4縦ならばほどよい余白が得られる。Firefoxの印刷プレビューはなんかおかしいのであてにしない。
body {
margin: 0;
padding: 0;
width: 100%;
background-color: white;
background-image: none;
font-size: 12pt;
line-height: 1.4;
}
head+body {
width: 165mm;
max-width: 100%;
min-width: 80%;
margin: 0 auto;
}4. ロゴの上は10mmぐらいあけるときれい。どっちにしても、縦方向の調整は難しいのでなんとなく間をあけることになる。
5. 行間は多めに。1.8～2.0ぐらいでもいいと思う。その他の余白も大きめにとる。
p, dt, dd, th, td, li {
line-height: 1.8;
}6. floatはADP: floatレイアウトでつまづかないためのTipsで挙げた画面上のはまりポイント以外にも地雷がある。複数のページにまたがる場合、floatの解除後の要素があらぬところに迷い込んだりする（IE6）。確認をして大丈夫ならそのまま使ってよいが、怖ければ段組なしにしてしまおう。段組なしでA4に印刷すると、横幅165mmでもかなり横に長いので、余白をとって本文は真ん中か、右に寄せる。たとえば右に寄せる場合、IE6ではmargin-left: autoが効かないので、text-alignと組み合わせる。
#container {
text-align: right;
}
#content {
width: 92%;
margin-left: auto;
text-align: left;
}7. tableは横幅を100%にするとさまになりやすい。IE6（後方互換モード？）はいっこ上の要素で横幅を指定していないと100%の指定がうまくいかないので、あらかじめ#contentは（marginをつけるだけではなく）例のようにwidthを指定し、右に寄せている。ここではfloatを使わないので、ネガティブマージンも使っていない。
Firefoxはテーブルが複数ページにまたがる場合、thead, tfootやtable要素の上下のボーダーを次のページにも書いてくれる。theadを使っていないときは、下手にページごとにtable要素の枠線を書かれると非常にわかりにくくなるので、できるだけth, tdだけでボーダーを使う。セル内の余白も大きめに。
table {
margin-bottom: 1em;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 2px solid #473533;
padding: 6px 8px;
vertical-align: top;
text-align: left;
font-size: 10.5pt;
}8. リンクアンカーの後にURLにつけるのがよくあるテクニックのようだ。Firefoxは印刷プレビューで文字が重なってしまうことがあるので、おまじないで:afterでつける文字列の最後にひとつスペースを入れる。ロゴにトップへ戻るリンクをしている場合、消しておいたほうが見栄えがいい。
a:after {
content: " >> " attr(href) " ";
font-size: 10.5pt;
}
#logo a:after {
content: "";
}9. ボーダーの使い過ぎに注意。前述の通り、背景色・背景画像は印刷しない設定にできるので、装飾に使えるのはborderとlist-style-imageぐらいだ。だが、だからといって使いまくると汚くなる。
まとめ。まだまだ改善の余地はあると思うが、基本編としてこれぐらいを挙げておいた。今後、ホームページを印刷したものだがら見づらくてあたりまえ、ダサくてあたりまえ、という常識（？）が、どんどん変わっていくといいなと思っている。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/689
CSS を利用した印刷ですが、企業のサイトでは三井物産のサイトがとてもよくできています。
ウェブサイトの印刷機能については以前から色々と調べているのですが、今までで見た中で一番よく出来た（作り込まれている）企業サイトだと思いました。
media 指定のちょっとした工夫なんかも、テクニック的には対した事ありませんが、通常の描画と印刷用の描画をあえて擬似的に別ページ化している点など利用者の事をかなり深く考えた結果だと思い、関心してしまいました。
ちなみに海外では以下のようなサイトもあり、文化の違いというか割り切り方の違い ? を感じたりもします。
http://www.uxmag.com/
上記のページを印刷プレビューすると...
本（上記）エントリー、参考になりました。
ありがとうございます。
やまざきさん、情報ありがとうございます。なるほど、わざと別ページっぽく見せる方法もあるんですね。別ページを用意するかどうかに関わらず、「印刷用ページ」のボタンは、どういうものが出てくるのか、という予測可能性を高める意味で有効だと思います。
利用者が画面で見たままの状態を印刷したいケースもあるよね？という話は、この手の話をすると必ず出てきます。が、それがどれくらいの割合／頻度なのか、私はよくわかりません。多くのサイトがそうだからそういうもんだと思っているのか、そうでないと困る事情があるのか。もう少し考えてみます。
今日時間があったので管理しているサイトの一部にプリントしやすいように修正してみようと思い検索していたらここに行き着きました。
参考にさせていただき、たぶん余計なものは極力省いた状態でプリントできるようなCSSを実装できたっぽいです。ありがとうございました。
sozoさん、ありがとうございます。お役に立てたようでうれしいです。印刷関連はまだまだよくする余地があると思いますので、今後も少しずつ書いていくつもりです。