「印刷用ページ」の作り方

そこが知りたい！Web標準サイトの活かし方（5）

印刷用ページの作り方

　各デバイス共通の基礎知識を押さえたところで、本稿の本筋である「印刷用ページの作り方」についてみていくことにしましょう。Webと印刷ではメディアが違うため、作り方のポイントも当然異なってきます。各メディアの特徴を踏まえたうえで制作することが大切です。

印刷用スタイルシートの準備

　本稿の冒頭で触れたように、印刷用ページはCSSのみで対応できるので、新たにWebページを作り変える必要はありません。印刷用スタイルの適用方法はさまざまですが、管理面でのメリットを得るためには、外部スタイルシートの利用が前提になります。

　おさらいになりますが、印刷用スタイルも含め、1つの外部スタイルシートですべてのスタイルを管理したい場合には、次のように「@media」でメディアタイプ「print」を指定するとよいでしょう。

［リスト4］@mediaで部分的に印刷用スタイルを指定

/* 全デバイス対象のスタイル */
em { font-color: red; }

/* 印刷用スタイル */
@media print {
  em { font-weight: bold ; }
}

　印刷用のスタイルを細かく指定したい場合には、印刷専用の外部スタイルシートを用意する方が管理がしやすくなります。「link要素のmedia属性」または「@import」で、メディアタイプ「print」を指定しましょう。

［リスト5］link要素やstyle要素のmedia属性でメディアタイプを指定

<link rel="stylesheet" type="text/css" href="screen.css" media="print" />

［リスト6］@importでメディアタイプを指定

@import url("print.css") print;

印刷可能領域を考慮する

　最近では、ディスプレイの高解像度化が進み、Webページのレイアウト領域の幅もだんだんと広く設計されることが多くなってきました。このようなケースで印刷時に起こりがちなのが、Webページが紙面に収まらず、画面の一部が印刷されないといった問題です。ブラウザの印刷設定で、「用紙サイズに合わせて縮小」することも可能ですが、すべてのユーザーがそのような機能を利用しているとは限りません。

　従って、印刷用ページはプリンタの「印刷可能領域」を考慮して設計する必要があります。A4サイズに収まる目安としては、縦方向印刷の場合、幅650ピクセル程度、横方向印刷の場合は幅1,000ピクセル程度なので、このサイズを想定して印刷用スタイルを設計するとよいでしょう。

図1：縦方向印刷のA4サイズ印刷可能領域の目安

　なお、CSS2で導入された「@page」とページメディア向けプロパティを利用すれば、印刷用スタイルを細かく設定できることになっていますが、現状でサポートしているブラウザが少ない（Opera6.5以上およびIE 8のみ）ため、あまり利用されていません。またこれらは、CSS 2.1勧告候補でも削除されているため、ここでの説明は省略します。

改ページの設定をする

　Webにはない印刷メディアの特徴として、「改ページ」が挙げられます。Webページをディスプレイで閲覧する際はスクロールできますが、プリンタはページごとに印刷するデバイスですから、どこでページを区切るかといった「改ページ位置」が問題になってきます。例えば、たった数文字分が次ページに繰り越して印刷されてしまった場合などは、用紙を無駄に使ってしまった気分になります。エコではありません。

　意図しないところでの改ページを避けたり、改ページ位置を任意の位置で指定したりする場合には、「page-break-beforプロパティ（要素の直後で改ページ）」や「page-break-afterプロパティ（要素の直前で改ページ）」を利用できます。

　これらのプロパティはブロックレベル要素に対して適用でき、次の表のように「auto」「alweys」「avoid」「left」「right」の値を指定できます。例えば、h3要素の直前で常に改ページをしたい場合は、「h3 { page-break-befor: always; }」のように指定します。

page-break-befor／page-break-afterプロパティで指定できる値

値	説明
auto	改ページについて特に指定しない（規定値）
always	その要素の直前または直後で常に改ページ
avoid	その要素の直前または直後で改ページしない
left	改ページ後に見開きで左ページになる場合に、その要素の直前または直後で常に改ページ
right	改ページ後に見開きで右ページになる場合に、その要素の直前または直後で常に改ページ

　また、現状ではOperaとIE 8のみの対応になりますが、要素の途中での改ページをコントロールしたい場合には、「page-break-insideプロパティ」を利用できます。値には、「auto」「avoid」を指定できます。例えば、table要素の途中での改ページを避けたい場合、「table{ page-break-inside: aviod; }」と指定します。

page-break-befor／page-break-afterプロパティで指定できる値

値	説明
auto	要素の途中での改ページを禁止しない（既定値）
avoid	要素の途中での改ページを禁止する

印刷に不要な情報を非表示にする

　ナビゲーションや検索ボックス、広告など、Webページを構成する要素としては必要であっても、印刷時には不要になるものもあります。印刷用CSSでこれらの不要な内容を非表示にしたい場合には、「display: none;」を指定します。

［リスト7］印刷に不要な部分を非表示化

#global-nav, #local-nav {
  display: none;
}

　さて、このように不要な内容を非表示にし、印刷しないようにする手法は、一見、人にも地球にも親切であるかのように感じます。しかし、ユーザーの中には「ブラウザで見たままの状態がそのまま印刷される」という認識を持っている人も多く存在しますし、あるいは「そのままの状態で印刷したい」というユーザーもいるかもしれません。制作者にとって不要であっても、ユーザーにとっては必要な情報であるかもしれないわけです。

　従って、勝手におせっかいをやくのではなく、ユーザーが望んでいる場合にのみ、シンプルな印刷スタイルを提供するのが望ましいと言えるでしょう。例えば、地図サイトやお料理のレシピサイトなど、印刷されるケースの多いサイトでは、「印刷用ページ」や「プリンタアイコン」などのリンクが用意されており、クリックした場合のみ印刷用スタイルが適用されるような仕組みが提供されています。

リンクテキストにURLを表示する

　Webページに含まれるリンクは、それ自体が機能を持っていますが、印刷してしまうと、単なるテキスト（あるいは画像）として出力され機能性がなくなります。印刷時に、リンクをより意味のある情報とするために、URIを出力するように工夫するのも1つの方法です。次のように:after擬似要素とcontentプロパティを指定することで、a要素のhref属性の値を印刷できます。

［リスト8］リンクテキストにURIを表示する

a:after {
  content: "（" attr(href) "）";
}

　仕組みとしては、まず:after擬似要素で「a要素の後に内容を生成」、contentプロパティで生成内容に「atter(href)」を指定してhref属性の値を取得してます。前後の「（」「）」は文字列なので、引用符で囲んでいます。しかし、サイト内リンクのように相対パスで指定されている場合には、あまり有益な情報であるとは言えません。

　このような場合には、「http://codezine.jp/」のような文字列も含めて指定するとよいでしょう。この時、外部サイトのリンクなど、そもそもhref属性値に「http://」からはじまるURIが指定されている箇所については、「http://」の記述が二重に表示されてしまうことになります。そこで、このような箇所については、「.external」といったクラス指定をしておき、クラスによって表示を制御するようにするとよいでしょう。

［リスト9］リンクテキストに「http://」からはじまるURIを表示する

/* サイト内リンク（相対パス） */
a:after {
  content: "（http://codezine.jp/" attr(href) "）";
}

/* 外部サイト（絶対URI） */
a.eternal:after {
  content: "（" attr(href) "）";
}

色の表現の見直し

　Webページは、カラーで印刷されるとは限りません。モノクロ印刷の場合も考慮して、情報を色に頼って表現している部分の見直しをしましょう。例えば、強調したい部分を「em要素」でマークアップして「color:red」としていても、モノクロ印刷で「赤」を表現することはできません。この場合、印刷用スタイルでは、太文字にしたりボーダーで囲んだりするなどして、モノクロ印刷でも強調箇所であることを認識できるよう工夫する必要があります。

［リスト10］ディスプレイ用CSSの強調部分：赤文字で表現

em {
  color: red;
  background-color: white;
  font-style: normal;
}

［リスト11］印刷用CSSの強調部分：太文字で表現

em {
  color: black;
  background-color: white;
  font-style: normal;
  font-weight: bold;
}

マルチカラムを解除する

　ブラウザのCSSのサポート状況はますます向上し、Webページの複雑なレイアウトが可能になりました。しかし印刷時におけるブラウザのサポート状況は、まだ一定水準に達しているとは言い難い状況にあります。例えば、マルチカラムでレイアウトされたページを印刷すると全体のレイアウトが崩れるというのは、頻発しがちな問題です。

　従って、Webページにマルチカラムを採用している場合には、印刷用のスタイルではマルチカラムレイアウトを解除してシンプルなレイアウトにすることも検討してみましょう。特にマルチカラムの実装にフロートを利用している場合には、改ページの設定などもうまく適用されないことがあります。

まとめ

　今回は、多様なデバイス向けページ作成のはじめの一歩として、「印刷用ページ」の作り方を取り上げてみました。PCディスプレイで閲覧することを前提に作られたスタイルを印刷時にもそのまま適用してしまうと、思わぬところで不具合が出てくることがあります。もう一度、印刷用のスタイルを見直してみてはいかがでしょうか。

　さて次回は、携帯電話向けページの作り方について、メディアの特徴を踏まえながら紹介したいと思います。