Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

印刷用CSSをまとめてみた。

Web標準

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。


ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。


とりあえず、最低限やっておいたほうがよいこと。

body {
	font-size: 12pt;
	color: #000000;
	background-color: #FFFFFF;
}

a:link,
a:visited {
	text-decoration: underline;
	color: #000000;
}

img {
	border: 0;
}
  • 印刷で読まれることを勘案するのなら、font-sizeはある程度大きいほうがよい。また、このときはポイント指定のほうがよさそう。
  • モノクロプリンタを使う人のことを考えて、colorとbackgroundはモノクロで指定。
  • でも、これだとリンクをどこに貼っているのかが分からないため、リンク先にはアンダーラインを引いておく。
  • 画像にリンクを貼ることもあるため、画像周りのborderを消しておく。
#navi,
#secondary,
#ad {
	display: none;
}
  • 印刷時に不必要だと思われるところを消してしまう。ここで、Flashやページ内リンクも一緒に消してしまってもよい。
  • これで、ロゴとメインコンテンツのみが印刷できるようになる。
#wrapper,
#navi,
#primary,
#secondary,
#footer {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
  • その上で、各ボックスに上記の指定をしておき、勝手にboxが拡張されないように配慮。


必要に応じて、やっておいたほうがよいこと。

table,
th,
td {
	border-collapse: collapse;
	border-spacing: 0;
}

#primary table {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 5px;
	border: 1px solid #333333;
}

#primary table th,
#primary table td {
	padding: 3px;
	font-size: 90%;
}

#primary table th {
	border-bottom: 1px solid #333333;
}

#primary table td {
	border: 1px dotted #333333;
}
  • media="print"で印刷した場合、tableは印刷時に一切borderがひかれていない状態で印刷される。
  • そのため、th、tdにボーダーを引いており、ブラウザによっては表示がくずれるので、border-collapse: collapse;とborder-spacing: 0;を指定。
  • width: 100%;はtableが小さくても、用紙一杯に表を印刷するため。
  • ほかの余白などは好きに応じて。
a:link:after,
a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;
}
  • IE7でも未対応だが、ほかのモダンブラウザ利用者には便利。リンクの後ろにそのアドレスをくっ付けて、印刷してくれる。
  • ただし、相対パスの場合はイマイチな形になる。（たぶん、解決策もあるのだろうけれど）
body {
	line-height: 1.5;
	letter-spacing: 1px;
}

#primary {
	margin: 0 0 0 5%;
	font-family: "ヒラギノ明朝 Pro W3", "細明朝体", "ＭＳ Ｐ明朝", serif;
}
  • 文字間隔を適度に開けておいて、読みやすくしておく。
  • 本文はゴシックよりも、明朝体のほうが読みやすそう。


現在は、こんな感じで印刷用CSSを書いている。（文末に全コードを掲載しておきますので、参考にどうぞ）


さて、この印刷用CSSを書く上で参考にしたサイトを列挙。


でも、この印刷用CSSにはメリットもデメリットもある。それをまとめてくれているのが、以下のエントリー。
Print-friendly CSS and usability | 456 Berea Street


乱暴に和訳して、要約してしまうとこんなこと。

印刷用CSSは、特に印刷したくない文章やパーツを取り外してくれるという意味では画期的だが、でも、サイト訪問者は通常「自分が見ているページそのままを印刷する」というふうに考えている。でも、印刷用CSSを適用している場合はそうにはならない。このあたりのユーザーの選択する権利はどうなってしまうのか？

コンテンツを印刷したい時はブラウザの印刷機能を使って、サイトを見たまま印刷したいのであれば、プリントスクリーンショットを使えば？なんてことを思ってしまうが、それは考えが浅いのだと思う。その機能を使い分けられるユーザーなんて、絶対数から見れば少数派なのだろう。


456 Berea Streetではこの問題をまとめて、提起するだけにしており、これ以降の記事（2005年9月）にこの問題を取り上げているエントリーは見つからなかった。では、どうすればいいのかは僕もよく分からない。


追記（2006年12月15日）
はてぶでのコメントなどでもあったが、このへんの切り替えはJavaScriptだろうなとは思う。まだ、実装してみたことないが、A List Apartで配布されている、JavaScriptライブラリのstyleswich.jsを使って、本文のみのコンテンツを印刷したい人向けに印刷用CSSを切り替えさせる（プリンタのアイコンなどをクリックしてもらう）、また、あえて通常のページにはmedia="print"を指定せずに、そのままブラウザで印刷すれば、ページそのものが見たまま印刷される。


media="print"を使わずに、通常のページをそのままブラウザ経由で印刷すれば、ページが見たまま、本文のみを印刷したい場合はJavaScript使って、印刷用CSSに切り替えてもらい、そのページを印刷する。このへんが妥協のアイディアかなとは思う。


追記（2007年2月19日）
コメントを受けて、font-familyを修正しました。修正後は、

#primary {
	margin: 0 0 0 5%;
	font-family: "ヒラギノ明朝 Pro W3", "細明朝体", "ＭＳ Ｐ明朝", serif;
}

という形で、sans-serifではなく、serifです。


最終的に自分が書いたコード。

@charset "UTF-8";

/* -----------------------------------------------

	===== TOC =====
	
	* common.css
	* layout.css
	* module.css
	* accesebility.css
	* print.css

----------------------------------------------- */


/* common.css
----------------------------------------------- */

body {
	line-height: 1.5;
	letter-spacing: 1px;
	font-family: "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 12pt;
	color: #000000;
	background-color: #FFFFFF;
}

a:link,
a:visited {
	text-decoration: underline;
	font-weight: bold;
	color: #000000;
}

address {
	font-style: normal;
}

table,
th,
td {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	border: 0;
}


/* layout.css
----------------------------------------------- */

#wrapper,
#navi,
#primary,
#secondary,
#footer {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

#wrapper {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

#navi {
	display: none;
}

#primary {
	margin: 0 0 0 5%;
	font-family: "ヒラギノ明朝 Pro W3", "細明朝体", "ＭＳ Ｐ明朝", serif;
}

#secondary {
	display: none;
}

#footer {
	margin-top: 1em;
	border-top: 1px dashed #000000;
	text-align: right;
	font-size: 90%;
}

#footer ul {
	list-style-type: none;
}


/* module.css
----------------------------------------------- */

#primary h2 {
	display: none;
}

#primary h3 {
	border-top: 1px dotted #000000;
	border-bottom: 1px dotted #000000;
	margin: 10px 0 10px 0;
	padding: 8px;
	font-size: 100%;
	font-weight: bold;
}

#primary h4 {
	border-left: 5px solid #000000;
	margin: 10px 0 10px 0;
	padding: 0 0 0 10px;
}

#primary p,
#primary ul,
#primary ol,
#primary dl {
	margin: 0 0 20px 10px;
}

#primary table {
	width: 100%;
	margin: 0 0 20px 0;
	padding: 5px;
	border: 1px solid #333333;
}

#primary table th,
#primary table td {
	padding: 3px;
	font-size: 90%;
}

#primary table th {
	border-bottom: 1px solid #333333;
}

#primary table td {
	border: 1px dotted #333333;
}


/* accesebility.css
----------------------------------------------- */

div.hidden,
p.hidden {
	display: none;
}


/* print.css
----------------------------------------------- */

a:link:after,
a:visited:after {
	content: " (" attr(href) ") ";
	font-size: 90%;
}