REDLINE MAGAZINE | 印刷用CSSのお話

印刷用CSSのお話

最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。

デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。

印刷用のCSSを用意するようになってからは背景画像についてはあまり言われなくなりました。「印刷した時はちゃんと別表示になるねんなー」とかは言われますけど「ええ、うちは印刷用にも最適化してますから(ビシッと)」と胸をはって答えてます。「最適化」という言葉は非常にいい言葉ですね。言い方が悪いかもしれませんが「便利な言葉」だなーと。言う方も言われた方も「いい事してる」気持ちになります（多分）。今のところ印刷用CSSを用意しているサイトで「やっぱり見たまま印刷したい」とはまだ言われたことないです。言われたら少々やっかいだな･･･とは思います。いろんな意味で。

ということで今回は印刷用CSSに関してこんなん考えてますっていうお話でも書こうかな、と。前置き長くてすいません。

印刷用CSSの用意

とりあえずこんな感じで準備してます。

準備

印刷用CSSを書き始めた頃は、スクリーン用に内容を追加した後、印刷用CSSファイルへ移動して中身に不都合ないかと逐一行ったり来たりしてプレビューチェックしていたんですが、これはどうも個人的には効率悪かったです。

今はまずはスクリーン用を一通り完成させて、そのファイルを複製、中身を見ながら完全に消すものはdisplay:none組、幅やフォント周りだけ整理する組、背景画像絡んでる組、コーディング時に予めメモっておいた「ここは何か注意せよ」というイレギュラー組に分類してから細かい部分の確認をしてます。

紙ベースになった時にいらないものは原則として消す

ナビゲーション等、ブラウザの中でしか意味のないものは基本的には全部非表示にしてます。例えばヘッダ + 左ナビ + 右コンテンツ + フッタの定番レイアウトならメインで残すのは基本的には右コンテンツのみ、みたいな感じ。

予め印刷時のみ表示させるものをhtmlに入れておく

背景として扱ってるけど、印刷時にはこれも必ず入れたいっていうものはhtmlをコーディングする際、class="print"みたいな感じで印刷の時だけ表示させるためのclassを振った要素を入れてます。普通にブラウザで見るときは必要ないのでスクリーン用のCSSではそのclassの振ってある要素は非表示に。

画像置換してる部分とか、コレを入れておかないといろいろと不都合があるケースもあるので後から入れていくのは大変なんですが、予めそのつもりでコーディングしてるとそんなに手間も掛からず楽です。

フッタ部分に社名や所在地・連絡先なんかを入れるデザインが多いんですが、それ以外にフッタリンクや関連情報へのリンク、その他モロモロ何かを入れる際なんかに、フッタの中で「これは印刷に含める･･･これはいらない･･･」とか考えなくても済むように、必要なもの（ロゴ、社名、連絡先等）だけを一枚絵にした画像を用意しておいてclass="print"を振ったimg要素でフッタの直前なり後なりに入れておいて、印刷用CSSではフッタは丸ごと非表示にすれば印刷用CSSのソースもスッキリしますし、早いです。どのページを印刷してもこれが入ってるページは必ずページの最後に連絡先等が入った画像が印刷されてなんか整った感じになります。ちょっと小奇麗な枠とかで括っておくといい感じ。

左上にロゴがあるようなデザインで、画像置換とかする場合なら、それが正規のロゴならば必ずこれは入れてます。なんか、正規のロゴがないような会社さんもあるのでね。「特に決まったロゴとかないねん。なんか適当に作ってー」みたいに言われる事も個人的には多いです。そんな場合はテキストのみで社名が入るようにしてます。後から正式なロゴがもし出来た場合に印刷物なんかにその正規ロゴが載ってるのにサイト印刷したら違うロゴが出てきたーみたいなのは嫌なので。後からそのロゴと差し替えればいいんですが、意外とサイト制作者に「ロゴ出来たよー」という連絡が来るのは遅いです。存在忘れられてます。連絡が来たと思ってもサイトのデザインイメージと全然合わないものだったりして切なくなった事もあります･･･。

あまりインクを使わずに済むように

私自身がセコいので印刷してインク使いまくるのはあまり好きではないです。なのでなるべくインクを使わないように単なる背景とかは特別な場合を除いて全部カットしてます。

後から追加したスタイル部分も忘れず確認する

スクリーン用のスタイルでサイト公開当初にはなかったけど後から追加したスタイルに対しての印刷用のスタイル設定。これ、しょっちゅう忘れて後からこっそり追加してます＞＜

後から追加したって印刷スタイルに影響ないケースも多いんですが、イレギュラーなケースで「あれ？」ってなってたり、テキストカラーやサイズでちょっと見た目的にも強調したい部分でせっかくスクリーン用には指定してるのに印刷用には書き忘れてたりして。

別に印刷時にそのスタイルがないからって情報が見れないわけではないんですが、「せっかくなので印刷用も最後まで面倒みてあげようよ」っていう心意気を忘れないようにしてます。

その他、こんなん考えますーっていう話も書いてみますね。

リンク先のURLも印刷する

もうコレは至る所で目にするお話なんですが、a要素のhref属性の値も印刷時にはちゃんと印刷させるという定番ネタ。こういうのはガンガン活用すべきなんだろうけど、個人的には今の所はおまけ的な扱いにしてます。理由は後述。基本はこんな感じ。

a[href]:after {
	content: " ("attr(href)") ";
	}

リンクテキストの後ろに（http://redline.hippy.jp/）みたいな感じでリンク先が入るという内容。

注意してるのはこんな点

このままだと普通に手動でコーディングしてるサイトだとちょっと面倒な事があるので注意してます。

例えばこのブログみたいにブログツールを利用して各リンクを設定してるケースなんかでは全部のhref属性に絶対パスを入れる手間も掛からないし、この書き方だけで十分使えると思ってます。

だけど、普通のサイトで手作業でサイト内リンクを指定してる場合（テンプレ使えよとかは別の話として）たいがい相対パスで繋ぐじゃないですか。その場合、上の書き方のままだとサイト内リンクは「なんたらかんたら（../test/index.html）」みたいな表記になってしまう。それだと印刷したユーザーにとったら意味不明で親切設計のつもりが逆に「なんだこれは」状態になってしまいますよね。

なんか随分前に、この相対パスをどしてくれようと考えてて

a[href^="/"]:after{
 	content:"(http://redline.hippy.jp"attr(href)")";
	}

こんなんも考えたこともあったんですが、チマチマと「/」から始まる絶対パスに置き換えるなんて労力が半端ないので却下。結論として印刷時にリンク先のURLを記載したい部分にはclassをつける事にしてます。例えば外部サイトへのリンクはこんな感じ。

a.exlink[href]:after {
	content: " ("attr(href)") ";
	}

外部リンクに.exlinkっていうclassを指定してそのclassが指定されてるa要素のhref属性は印刷時に表示するという感じ。んでもってここには書いてないけど外部サイトへのリンクは別窓で開くことが多いので「別窓開きますよ」アイコンの指定も合わせてしてたり。（最初からリンクテキストにURLも書けばいいじゃんとか言われたら元も子もないんですが）

同サイト内での使い道

同サイト内でのリンクでもここは絶対記載したいなーっていうa要素にはclassを指定してそこだけ絶対パスでhref属性を書いたりもしてます。何かの申込書PDFファイルへのリンクとか、トップページの更新情報とかで「新製品○○○が発売になりましたー」とか書いててリンクテキストになってるならそういう所に詳細ページへのurl入れるといい感じかもです。情報の詳細ページじゃなくてわざわざトップページを印刷しようというユーザーはあまりいないかもしれないですが。

あと、これまた印刷するユーザーはほとんどいないと思いますが、一応念のためサイトマップのコンテンツは絶対パスで各ページへのリンクを設定してたりもします。もう一度言いますがサイトマップのページを印刷するユーザーはほとんどいないとは思いますけどね。

ただ、これって私みたいに小中規模のサイト制作がメインだからできる事なのかもしんないです。規模が大きなサイトだと後々把握というか管理とか大変そうだな、とは思います。システムがソース吐くから逆に楽なんだぜとかいうのもあるのかもしれませんが。

IE6、IE7では無理

ご存知の通り、CSSの力だけではIEさんではバージョン8でしか利用できません。IE6さんならともかく、IE7さんでなんとかなるとおもいきや、擬似要素は未サポートというオチで使えないのであります。ということで困った時のjQueryを使うという手もあります。

$(document).ready(function(){
	var Href = $("a.exlink").attr("href");
	$("a.exlink").after("(" , Href , ")");
})

jQueryでなんとかする場合は上のCSSと併記するとモダンブラウザでは2回urlが出てくる事になるのでCSSの方はコメント化しておくなりなんなりして適応されない状態にする必要があります。またJS無効だと使えません。そして当然印刷時だけじゃなくてスクリーンにもURL部分が出てきます。だったら最初からリンクテキストにurl含めてればいいじゃんって話になりますね。はい。

なのでこれは上に書いたとおり、おまけ的な存在として用意しています。個人的には印刷時にURLがあったらいいなって思う部分はURLもリンクテキスト内に併記したらいいじゃんって思うケースも多いんですが、クライアントさんは「URLは消して」と言われる方が多いです。

ということで、IEユーザーの皆さん、早くバージョン8を使ってください＞＜

page-break-beforeって結構使える子だよね？

最近page-break-beforeって結構使える子だよね？と時々思ってます。page-break-beforeはその要素の直前で改ページを制御するためのプロパティです。

page-break-before プロパティ - TAG index Webサイト

プロパティ自体は各ブラウザで使えるんですが、値だけ使える値と使えない値があるので注意が必要。と言っても私は「always（直前で改ページさせる）」しか使ったことないので、何の問題もないんですが。禁止したい時ってどんな時なんだろうな。つーか禁止したらどういう風になるのかなぁ。紙なかったら禁止しても改ページせざるを得ないのではとか、うまい具合に適当な場所で改ページするの？とか、なんか疑問に思ってきたので後で調べる。おもしろい結果になったらまた追記します。

使い道はこんなところ

多分、こういう改ページとかってホントはユーザーの環境を無理やり制作側でコントロールしようとしない方がいいとは思ってるんですが、せっかく印刷してもらうならキレイな文書として保存してほしいなとか思うわけです。

例えばタイトルがあってその下に表があるようなページ。もうちょい具体的に言うと「○○価格表一覧」というタイトルがあってその下に価格表があるようなページって手元に残すとしたらタイトル部分から印刷できたらいいのになとか思うのですよ。
おそらくそのタイトルの上にちょこっと載ってる「当店では常に地域最安値をなんたらかんたら･･･ご来店をお待ちしています。」とかいうテキストとか「写真はイメージです」的な画像はホントはいらんでしょうし。

印刷専用ページ作ればいいじゃんとかいう説もあるんですが、ソースの再利用を前提に考えるとpage-break-beforeを利用するのが一番効率いいかな、と。

(CSS)
#sample{
	page-break-before:always;
	}

(HTML)
<h3 id="sample">○○価格表一覧</h3>

こうしておくとその部分から改ページされてタイトルが用紙の頭にきてくれる。もしも印刷プレビューをしてから印刷する習慣がついてるユーザーだったらちょっぴりハッピーになれるかもしれません。「あ、2ページ目だけ印刷すればいいやー」みたいな。

私的な使い方

これは個人的な話なんですが、私は技術系のサイトでソースが掲載されてたりするブログ等は印刷してじっくり調べながら随時書き込みしたりして熟読する事が多いんです。（特に英語サイト＞＜）

モニタでコメントをざっと確認して今回はコメントの印刷はしなくていいやって場合はその直前までのページまでを印刷指定したりしてインクをケチってます。ほんとに英語サイトは「Nice!」とか「thank you」とか一言コメントが何十件も並んでる場合が多くて「用紙いっぱい使ってると思ったら後半ほとんど thank you コメントやーん」みたいな。

そういう時にFirebugでコメント部分の先頭の要素に「style="page-break-before:always"」とか指定してからコメントの前のページまでを指定印刷とかやってます。ひっそりこっそり。

別にエントリ本文の続きでコメントの先頭の一部が入ったままキリのいい所までをページ指定しても残りは印刷しないようにしてもいいんですけど、一定期間はファイリングとかして保存しているのでなんか･･･ちょっとだけ入って残りはカットとか･･･あぁ、私が神経質すぎるのか。

2009年07月02日 23:31 | Red | パーマリンク