Trans

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

印刷用CSSをもっとよくするための4つのTips。

Web標準

約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。


印刷用デザインも1つのWebデザインプロセスとして考えておく。


今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on the web: Printing the web : Journal : Mark Boulton。


元ネタを見てもらえれば分かるように、印刷されることも考えて、きっちりとWebデザインの中に印刷用デザインの制作プロセスを入れるという紹介がされています。特に、この文章は気に入っています。

The screen is just one of the media types for which we have to design for. Another media type, which I feel is often neglected as part of the design process for a web site, is print.
僕たちがデザインしないとならないのは、何もPCの画面用だけではないよね。でも、Webサイトのデザインのプロセスでは、ほかのメディアは時々無視されていると思うんだ。特に、印刷向けとかね。


I feel the process of designing the printed content of a website is as important as designing for other media; screen readers, mobile and small screen.
僕たちが音声ブラウザや携帯向け、小さなノートパソコンのデザインを考えてデザインするように、印刷されたコンテンツのことも考えてデザインするのは、どっちも重要なことと思うんだ。

元ネタ自体はかなり長文なので、サンプルを見たほうが手っ取り早く理解できます。上記エントリーでサンプルとして取り上げられているのは、Guardian Unlimitedのサイト。まず、印刷用CSSを何も適用していないのが、こちら。


http://www.guardian.co.uk/international/story/0,,1741333,00.html


ブラウザの印刷プレビューで見てみると、サイドのナビゲーションは残ったままなので余計な印刷ページ枚数が必要だし、検索用のフォームなどが残ったままだったりと、印刷のことは考えられていません。さて、上記著者が作った印刷用CSSを適用したものを見てみます。


http://www.markboulton.co.uk/examples/guardian/


もちろん、ナビゲーションやフォームなどは取り外し、読みやすくしています。ここまでは一般的。でも、ちゃんと印刷されたあとのページ自体にもきっちりとデザインを施してあり、単に読みやすいだけではなく、スタイリッシュであったりします。これが著者の言いたいこと。要は、Webデザインというのは何もパソコン向けだけで完結するのではなく、印刷されることもあるわけだから、ちゃんとそこまで考えて、デザインするのがいいんじゃない、ということ。


width: 100%;よりも、autoを使ったほうがいい。


お次は、A List Apart: Articles: ALA’s New Print Stylesより。A List Apartの印刷用CSSを書いた中の人の一人であるEric Meyer氏のエントリーです。その多くは、A List Apartの印刷用CSSの説明なので、興味がある方は全文読んでも面白いと思います。


さて、僕も前の「印刷用CSSをまとめてみた。」では、#wrapperや#primaryなどには、width: auto;を指定していたのですが、「100%ではダメなのだろうか」と疑問に思っていました。その回答がこのエントリーにあります。


こういったwidth: auto;を指定する際には、padding: auto;とmargin: auto;も同時に指定するのですが、もし、何らかの理由で、このpaddingやmarginが外れてしまった場合のリスク回避として、width: auto;を使うようです。


もし、width: 100%;で指定しているとすると、何かの拍子にpaddingなどが適用されてしまうと、すぐに用紙幅を超えてしまい、そのページが複数ページに渡ってしまいます。しかし、width: auto;であれば、そのリスクを回避できるというわけです。


印刷した際のページのリンクをきれいに表示させる。


印刷された紙というのはもちろんですが、リンクが機能しません。そのために、印刷ページのリンク先も一緒に書き出してあげると、紙の媒体からもほかのページへのリンク先が分かり、便利です。


「印刷用CSSをまとめてみた。」のエントリーではこのリンクを表示する方法として、

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

というコードを紹介しましたが、絶対パスでアドレスを指定している際には、きれいに表示されるのですが、相対パスの場合は何が何だかよく分からないコードになってしまいます。その解決策として、CSS3を使ってしまうという方法。CSS3絡みの各種セレクタについては、WWW WATCHさんのCSS セレクタに関するおさらいがよくまとまっています。


元ネタは先ほどと一緒のA List Apart: Articles: ALA’s New Print Stylesからです。コードはこんな感じです。

a[href^="/"]:after {
	content: " (http://www.hogehoge.com" attr(href) ") ";
}

というふうに、属性セレクタにafter擬似要素をくっ付けてしまうという方法。ただし、CSS HappyLifeさんのCSSセレクタ簡易対応表とEmotional WebさんのIE7に関する属性セレクタのエントリーを読む限りは、まだまだ実用には耐えられなさそう。というわけで、JavaScriptを使った別アイディアも紹介します。


元ネタはA List Apart: Articles: Improving Link Display for Printというエントリーより。これもサンプルを見たほうが手っ取り早い。サンプルはこのページ。


JavaScriptを用いて、印刷向けのページのリンク先にナンバーを振って、そのリンク先を文末に一覧表示させてしまうというスクリプト。これは結構便利です。この作者が言うには、

This is incredibly helpful for users who print the page, as it alerts them to the destination of each link. When you have a paragraph with a lot of links (especially long ones), however, this technique hinders readability:
リンク先を印刷向けのページに表示するために、after擬似要素を使うのはそれはそれでよいとは思う。ただし、1つの文の中にとても長いリンクが複数ある場合は、このテクニックが文章の読みやすさを損ねてしまいかねない。

とのこと。確かに、上記エントリーを見てみれば、それは納得できます。


Opera8と9バージョンは背景画像も簡単に印刷できてしまう！


多くのブラウザは、通常の状態では背景画像を印刷しません。ただし、例外があります。それがOperaです。元ネタは、Digital Web Magazine - CSS Styling for Print and Other Mediaから。このエントリーの真ん中あたりの「What Do You Put in a Print CSS File?」というセクションの「Note」というところに書いています。


Operaのデフォルトの印刷は背景画像を印刷するという設定になっています。そのために、印刷用CSSにおいて、背景画像を消しておかないと、そのまま背景画像が印刷されてしまうことがあるようです。


そのために、

body {
background-image :none;
}

と書いているほうが、リスクを回避できるとのことです。


以上、長々と書いてしまいましたが、印刷用CSSをより最適化するためのTipsでした。