印刷用 CSS についての疑問メモ

Date
2008-08-09 (土)
Category
Web
Tags
, ,

ウェブサイトをプリントアウトするとき用に、印刷用 CSS を作成しますが、それについて自分の中の疑問をちょいとメモ。印刷用 CSS の書き方云々ではないのでご注意をば。

いきなり疑問を投げかけちゃうのですが、みなさんはウェブサイトを印刷するときに、ウェブページに表示されている文章はもちろんのこと、画像からなにから、ディスプレイに表示されているすべて、そのまんまを印刷できた方がいいなぁとお考えでしょうか。

たとえば、遊園地にいくとして、電車でいくなら○○線で○○分、○○駅で下車、徒歩○○分。
車でいくなら国道○○線で○○交差点を左折、所要時間○○分、駐車場はココ、などという文字の情報。
それに加えて、地図の画像とか Google Maps などで表示される情報。

これら、つまり目的地までの道のりを文字で表現したものと地図が印刷できていれば十分なのでしょうか。
それとも、できればブラウザ上で表示されているサイトロゴまわりのデザインやメニューボタン、文章を装飾している画像も印刷したいのでしょうか。

ユーザが知りたい情報って、どこまでなんだろう

印刷用 CSS は、ウェブページを印刷した際に、読みやすいように最適化するためのものです。なので、普段私たちが見ているウェブサイトの見栄え(デザイン)とは、必ずしも同一ではありません。

文書構造を (X)HTML でしっかり作りこみ、視覚的なデザインを パソコンで見るウェブページ向けの CSS(media=”screen” で指定したもの) で構築したウェブサイトの場合、CSS で画像置換や背景画像の指定など、必ずなんらかの操作をしています。だけど私が知る限りでは、CSS で画像を背景的な役割(デザイン的に、という意味。しつこいけど念のため)で使用した際、それらは印刷したときには紙の上には表示されません。

私個人としては、読む人に伝えたい情報、読む人が知りたい情報さえ印刷できれば、そこにはデザイン的なものは必要ないんじゃないのかなーとおもってたんですが、ページをそのまままるごと印刷したいとおもっている方も意外に多いよね…とか、ふとおもったのですよ。そんなの、私だけの勝手な思い込みかもなぁって。実際にそのような要望をうけることがあったものですから、どうしたものか、と、仕事をしているバージョンの私は、あれこれ試行錯誤しとるわけです。

ディスプレイ上に表示されているすべてを印刷するとなれば、文章はともかく、使用している画像もすべて HTML ソースとして書き出さねばなりません。実際のとこ、必要な箇所には画像ソースを HTML 文書内に書きますが、デザインに関していえば、あくまでもブラウザ上での視覚的なデザインをするための役割として CSS という存在があるわけだから、すべてを HTML に書き出すことはしません。というか、そんなのまずないでしょうし、HTML 文書として NG といった方が正しいかも。

印刷用 CSS のために、HTML と CSS の本来の役割を無視するのはちょっとなぁ…とおもったりします。時間と労力をかけて目的を果たせたとしても、印刷物として出力したときに、そこにどれだけの価値があるんだろう、とか。考えちゃう。極端な話ね。

だけどだけど、きっちりかっちり「見たまんま」を印刷したいときだってあるわけですよね。

そんなときはユーザ側でスクリーンキャプチャして印刷するとか、ブラウザの設定ですべてを印刷できるようにする。
制作者側としては最初から PDF 化したデータを用意するか、スクリーンキャプチャした画像を別に用意する。

とかおもったんですが、前者は手間ひまかかってめんどくさい(=スクリーンキャプチャやブラウザの設定のやり方がわからない、そのまま印刷できればいいのに!というユーザの思い)、後者の場合、PDF を見るためにアクロバットリーダがいちいち立ち上がるのがイヤだとか、画像にしたら文字がつぶれて読みにくいとか、どっちもどっちなんですよね…

ユーザの思いと制作者の限界

なので、そんなことをあーでもないこーでもないと考えてるうちに、いやー答えが出ないなぁという思いに私は至っているわけですが、どうなんでしょうね。

ユーザとしては、めんどくさい手順を踏まずに印刷したい。その中には、必要なことが印刷されていればまったく問題がないという人もいれば、いやいや全部印刷していこうよとおもっている人もいる。

だけど、実際問題、制作上での限界があります。それは技術的な問題でもあるし、ブラウザ的な問題でもある。できるだけウェブページを読む人には内容をわかりやすく、環境を選ばず使いやすくしてあげたいという気持ちはモチのロンであるけど、でもでも。でも、なんですよ。だから答えが出ない。というか、わからない、といったほうが近いのかも…

どっかで妥協点を見つけるか、もしかしたら私が知らないだけで「そんなの楽勝でできるよー」な答えがあるのかもしれません。だとしたら単なる勉強不足でごめんなさい、なのですが…ほんと、どうなんだろう。

page top

Trackback URL:

4 Replies »

Comments

  1. Comment by — 2008-08-14 (木) 8:05 PM

    こんばんは。
    新サイトに移られてから、初めてコメントします。
    とっても読みやすいサイトですね!!

    えっと、私はそこまでPCに詳しいほうではありませんが…確かに、印刷をする際に要らない情報ってあるよなぁと前から思っていました。
    無駄に印刷をしなければいけなくなったりと、手間がかかりますよね。
    最近はスクリーンキャプチャで、一度編集して印刷しております。

    また、遊びにきますね。これからもよろしくお願いします☆

  2. Comment by 運営堂 — 2008-08-15 (金) 8:29 PM

    はじめまして。
    私もweb屋をやっているんですが同じ疑問をいつも持ってます。

    コラムや連載などの文字情報が欲しい方はCSSで文字情報だけ印刷できるようにすればいいと思いますし、デザインの校正や会議などの資料として印刷したい方には横幅を650pxぐらいにしたスクリーンショット画像をおいて、ポップアップで開いて印刷のパターン良いんじゃないかな~って思っています。

    ヘッダーに「文字情報印刷」とか「画面印刷」のリンクをはっておいて、テキストが欲しい人はサイトからコピペでいいし、読みたい人はブラウザで印刷でいいし、画面を印刷したい人は画像を印刷すれば解決することができますから。しかし、画面を印刷したい人っていきなりブラウザで印刷する人が多いし、画像だと文字が読みにくくなっちゃうのも問題です。

    印刷のことだけを考えればガチガチのテーブルレイアウトがベストなんですが、そうするとアクセシビリティやらがメロメロですので、エントランスページを作って「印刷対応」と「印刷非対応」の2種類用意するのもあほらしい・・・。

    ブラウザの進化を期待するしかないんでしょうか。

  3. Comment by maako — 2008-08-18 (月) 10:35 PM

    >菫さん
    お久しぶりでしたー。コメントありがとうございます。

    >印刷をする際に要らない情報ってあるよなぁと前から思っていました。
    >無駄に印刷をしなければいけなくなったりと、手間がかかりますよね。

    そうなのですよねぇ。知りたい情報だけを印刷したい人にとっては、画像や余計な文章は、ほんとに単なる邪魔者なだけですよね。しかも、インクや紙のムダにもなってしまうという…

    菫さんのように、スクリーンキャプチャができて、なおかつそこからいらないところを切り取ったり、拡大縮小などの編集ができる人ならまったく問題がないのですけれど、これがなかなか、わからない人にはチンプンカンプンだったりするのです…

    正直、そこまで制作者が面倒を見なければいけないのかな?というきもちがあるのですが、あきらめきれない部分もあったりして、どうにも歯切れが悪くなってしまいます。

    菫さんのご意見、大変参考になりました。ありがとうございます。
    また読みにきてくださいませねー。

  4. Comment by maako — 2008-08-18 (月) 10:54 PM

    >運営堂さん
    はじめまして。コメントありがとうございます。
    同じ疑問を持たれている方がいらっしゃって、なんだかうれしいです。

    私たち制作者側としては、クライアントさんの意向を踏まえ、中身的なことをいえば文書構造をしっかり理解したうえでウェブページを作るのが本来の仕事であるとおもうのですが、クライアントさんの中には、見た目重視というか、パッと見さえよければいいんじゃない?みたいな風潮があるのが否めない状況もこのようなジレンマに陥る原因のひとつではないかな?ともおもいます。

    それをなんとか理解していただくのもこちらの仕事なんですが、印刷するならこのまんまでいきたい、という意向を示されたら、それもなんとか汲み取りたいともおもうのですよね…

    >印刷のことだけを考えればガチガチのテーブルレイアウトがベストなんですが、そうするとアクセシビリティやらがメロメロですので、エントランスページを作って「印刷対応」と「印刷非対応」の2種類用意するのもあほらしい・・・。

    これは、ほんとに同意です。時間とお金をかけてもいいのなら対応できますが、やはりスマートではないですし、印刷だけのためにわざわざ意図に反したレイアウトを組むのも疑問です。そもそも、そこまでする必要もあるのかな?ともおもったり…

    HTML や CSS だけでコントロールできない部分は、やはりブラウザ側の対応に期待するしかないんでしょうかね…。それもいつになるかわかりませんし、対応できるかどうかもわからないのですが…

    貴重なご意見、ありがとうございました。
    いつか、みんなが仲良くなれるウェブサイトが作れる日がくればいいですねぇ。

Leave a comment

  • お名前、メールアドレスの入力は必須ですが、メールアドレスは表示されません。
  • コメントは管理者の承認後に表示されます。ご了承ください。
(required)
(will not be published), (required)
your comments

recent posts

comments

trackbacks

category

archives

tags