remove
powerd by nog twitter

IE 帝國 その戦略と大衆支配の構造

プリンター・レンダリング(印刷用 CSS を考察)

CSS を用いると印刷の神が激怒する?

一般的に印刷向けのページを作る方法として語られるのは配色関係の注意事項となります。 つまり、白地に黒文字で表示されるように作成しましょうというハナシになります。 しかし、難しいのはプリンタ向けに構造を変化させるコトの方です。 印刷の場合、ページとページに連続性が無い為、下端・上端などでバッサリ文字が切られてしまい、 半分欠けたまま印字されたりします。 CSS の指定を全く行わずに HTML の論理付け(マークアップ)だけで構成されたファイルであれば、問題ないのですが...。

例えば以下の手順で CSS の動作をオフにしてやれば、大概のWebページが印刷向けになります。 以下、Internet Explorer における手順を記述しておきます。

上記の操作を行うと、CSS の指定の一部を無効にできます。 CSS を無効にするとは、HTML の各要素のスタイルがデフォルト値に戻るというコトを意味します。 残念ながら、IE では全てのプロパティをデフォルト値に戻せるワケでは無いので、 div で横幅が%指定されているような場合、印刷するにおいて不具合を生じたりします (ブラウザによっては CSS を完全に無効化させるコトもできます)。 しかし、Java Script を利用すれば CSS を完全に無効化させるコトができるようです(IEで)。 興味のある方は ”CSS 無効” などのキーワードで探してみてください。


要注意のCSS記述

CSS の指定を外部ファイルでまかなっているのなら、印刷用の代替CSSファイルを作ってみるのも手です。 印刷用の指定としては以下の点に気をつけるべきでしょう(配色関係は省略)。

考え方としては、全ての行の高さを統一するように調整するワケです。 また、文字のサイズは相対指定にした方が、ユーザーが任意に印字されるテキストの大きさを変えられるので、 デフォルト値を適用するか、small 、 medium あたりを指定しておきましょう。 絶対指定の場合は 10pt 12pt 14pt 16pt など有りがちなフォント・サイズで統一するのが懸命です。 妙なサイズで絶対指定すると、プリンタが対応できない可能性があります。


ユーザー・スタイルシート凡例

ユーザー・スタイルシートとは各人が用意した CSSファイルを、閲覧している WEBページに適用させる手段であります。 背景色を無理やり白くしたり、一行の長さを40文字で固定したりできます。 これは、カラーテレビをモノクロに変換させるような力技なので、 製作者が意図したとおりには表示されなくなります。 ちなみに <img src="xxx.jpg> という具合で表示させている画像に関しては、 HTML のマークアップによるものなので生き残ります。

例えば拙者が作成した当ウェブサイトの場合、モノクロをベースにしながらも青や紫で淡く彩色しています。 また、キャラクター画像も控えめに抑えるよう自主規制しつつも登場させています。 これらのデザインは CSS の指定によって行っていますが、やはりこちらの意図したとおりに見ていただきたいものです。 しかし、印刷しようなどという特殊な意図があるのならば、装飾は排除してテキストと画像だけ残した方が賢明でしょう。

ユーザー・スタイルシートの導入に関しては、 (ここでまたグダグダ説明すると)長くなるので、下記のリンク先の丁寧な文章を参照して理解してください。
大きな読みやすいフォントで表示するには The Web KANZAKI

さて、こちらでユーザー・スタイルシートを用意してみました。 (興味のある方は)以下のページにあるソースを保存して、ユーザー・スタイルシートに利用してみてください。
general.css...白地に黒文字(テキスト読解用)


印刷向きのデザイン、印刷不向きのデザイン

(657px を横幅の最大値にしている某サイトを参考に記述していきます)... 横幅を 600px程度に固定した table や div の中に、中身を詰め込んでいく構成にすると印刷しても崩れません。 これは、プリンター・レンダリング(印刷時における WEBページの組み立て方)に近い形でWEBページを構成しているが故に、 画面表示の際と印刷時における構築内容が酷似しているからでしょう。 ちなみに、Yahoo! JAPAN も横幅を似たような値(675px)に指定しているので、 ある意味ありがちなデザイン方法なのかも知れません。

紙に印刷する世界というものは、WEB の世界観とは大きく異なります。 紙というものは連続性が無い上下共に有限な空間ですから、枠に収まりきらない状況に直面すると簡単に崩れます。 シンプルに考えると、横幅を 600px程度に固定した WEBページなら印刷に対応できるとは前述の通りですが、 例えば float に関しては酷いものであって、画像やボックスへの回り込みが印刷モードでは叶いません。 できないばかりか、前後のレイアウトが float のおかげで狂ってしまうために大問題となります。 逆に table は印刷モードとの相性が良く、横幅さえオーバーしなければ上手に対応してくれます。

大雑把にまとめると、上下左右への伸縮を考慮した WEBページらしいフレキシブルなデザイン、 しかもレイアウト関係を table を用いずに css で設計しているような WEBページは上手に印刷されません。 これは当然といえば当然の成り行きであり、要するに WEB と紙媒体ではデザインに関する考え方が まるで違うからなんです。 紙媒体は絶対的な尺度で構築していく世界であり、例えば本や雑誌のレイアウトを任された場合、 A4なりB5なり用紙の大きさを定めないコトには作業をスタートさせることさえ無理なハナシです。 DTP の世界では現実世界にある定規と同じ尺(mm とかインチ)に頼って、配置やバランスを決めていきます。

一方、WEB の世界では全てが相対的な尺度で構築されています。 ディスプレイの大きさ、解像度、ウインドウ・サイズ(全画面表示で見るとは限らない)、文字の表示サイズ、 不確定要素が多すぎるので流動的なレイアウトが求められる世界です。 クダラナイたとえ話をするなら、家のテレビで見る映画の画面と、映画館のスクリーンに映し出される画面は サイズが全然違います。 ところが、WEB的な考え方でいくと、映画館のスクリーンには巨大な余白があって、 その中にテレビサイズの映像と字幕がポツンと表示されるだけなのですよ。

ハナシがまとまらなくて恐縮ですが、WEBページの印刷に不適格なレイアウトの一つに「三本柱デザイン」があるかと思います。 「三本柱デザイン」とは何かというと、左から順にナビゲーション・バー(サイト内リンク)の柱、 本文記載の柱、広告の柱、というようなブログを筆頭にしてよくあるデザインです。 それで、本文のところを印刷しようと思っても、三本柱が並列に存在しているので(table による構成が多い)、 余計なものまで印刷しないといけないワケです。 何が言いたいのかというと、「三本柱デザイン」に比べたらウチのサイトは200倍良心的だというコトですよ。


メディア・タイプの利用

HTML では文章の意味付けに徹して、レイアウトは全て CSS で行いなさいって、言うじゃなーい? 頑張って この通りにすると、そして外部参照で CSSファイルを呼び出すようにすると、ちょっといいコトがあります。 外部参照ファイルさえ書き換えてしまえば全てのファイルに同様の変更を与えるコトができます。 あなたが外部参照の CSSファイルを持っているのならば、それにちょっと付け足すだけで 「印刷用 CSS パターン」を作成するコトが可能です。

メディアタイプとは screen(スクリーン)、print(プリント)、braille(点字ディスプレイ)などといった、 ファイルを投影させる媒体の種別であります。 スクリーンとは、パソコンのディスプレイのコトであり、HTMLファイルで考慮されるのは当然、コレですわな。 通常はパソコンのディスプレイ向けに CSSファイルを作るワケです。 それならば、他の装置で投影される場合は最初っからソレ向けに(CSSファイルを)作成すればいいと云う天才理論が用意されています。 詳しい説明は下記のリンク先を参照してください。
メディアタイプ-CSS2 リファレンス-

general.print.css...インデント無し、もっぱら白黒(印刷向き)
上記の CSSファイルは先ほど紹介した general.css の前後に

@media print {

} 

を加えたモノですが、 他にも若干の変更(フォントを明朝体ベースにするなど)を加えてあります。 ちなみにこれをユーザー・スタイルシートに適用するとディスプレイで見る分には変化が無いのですが、 印刷モードにおいてのみ作用するので便利な気もします。

そしてコノ「@media print」に関する記述を持つ CSS を、 お手持ちの外部参照用 CSSファイルのケツ(末尾)に挿入して(上書き保存して)やれば、オーケイ。 プリンター・メディア対策完了です。 最も、ケースバイケースで改良してやる必要があるのでしょうが、考え方としてはこういう寸法なワケでございます。

関連;印刷用スタイルシートのススメ ...コビット


Mozilla / Firefox の印刷機能

一説によると、印刷に関するノウハウを Mozill の開発陣は蓄えていない為、 Word でワープロ機能を洗練させた MicroSoft には技術的には及ばないらしいです。

問題は印刷するときに生じる非連続性であり、要するに紙一枚ごとに途切れ途切れになってしまうというトコロです。 例えば、div の範囲に収められたテキスト・画像が印刷用紙一枚に収まりきらない場合、 IE だと複数の印刷用紙にまたがって印字してくれますが、Mozilla ですと収まりきらない部分は切捨てとなります。 overflow: hidden; という感じで処理されるワケです。 だから巨大な div に大量のテキストを挿入していると、Mozilla では印刷用紙2ページ目以降の印刷は不可能となり、 1ページ目に入りきる分だけが印刷されます。

例えば、複数の段落(<p>...</p>)をグループにまとめて一節とします。 節ごとに div で括ってしまい、5,6個の節で一章(一ファイル)を形作る構成にします。 ここで言うなら、「Mozilla / Firefox の印刷機能」というモノが一節になります。

Mozilla のプリント 図のように DIV.1(第1節)と DIV.2(第2節)を合体すると印刷用紙一枚では収まりきらないというケースも考えられます。 このような場合、Mozilla では空白(デッドスペース)を作って次のページに進ませます。 つまりは、節の途中で改ページされるコトが無いワケで、読みやすさはあるかもしれませんが余白が多くなり、 無駄にたくさんの印刷用紙が必要となります。


©2004 webman60kg / リンクはご自由にどうぞ
E-mail : webman60kg@infoseek.jp