CSSテクニックと印刷プレビュー

自称WEBデザイナーのトミナガです。

仕事柄、気に入ったデザインのサイトは画面ショットを撮って、Photshopで貼り付けをして、A4サイズに収まる範囲で印刷して、時間のあるときに眺めたりしています。しかし、一般的なネットユーザーがみんなこういった方法を知っているとは思っていません。これはあくまで個人的なコレクションの方法だし。

文章でも、気に入ったものはブックマークもしますが、印刷する時もあります（あとでor移動中にゆっくり読もうとか思って）。地図もそうだよね。

初めて行く場所や、バス・電車の時間表を印刷して持っていくこともあります。あと、ぐるなびのクーポン券とか。

といった感じで、実はWEBサイトは見るだけではなく、印刷して手元に置いておいたり、持ち歩くことも意外と多いメディアなんでないか？　とふと思いました。

私は仕事でコーディングをする場合、大半のケースで、

としています。
いろんな環境でいろんな動作を検証していたら、自然にこうなってったって感じですが。

まあこれには色々理由があって、多くの場所で語られている通りなのですが、

だいたいこんな感じです。

んで、大手企業のサイトはどうなってるかなと思ってちょっと見てみた。

上のサイトを、トップページだけサーっと見たのだけど、印刷してもちょっとはみ出すとか、FLASHの部分が空白になるぐらいでした。普通そうだよなー。あっ、でも、フルFLASHサイトだと真っ白だね（笑）。

ちなみに、こんなに「印刷プレビュー」時のことが気になりだしたのは、現在進行中の案件で、

text-indent: -9999px;

が多用されていたのと、N.Design Studioのイラレのチュートリアルを印刷してファイルしておこうとしたら、完璧な印刷用CSSでキレイに印刷できたことに感動したからです。

あるはずのテキストを飛ばしちゃうなんて！　文字は文字として存在してないと気持ち悪いよー。
他のページをコーディングするときの参考にしようと思って印刷しようと思ったのに、印刷プレビューを見たら真っ白だったので、愕然としてしまいました。

確かにHTMLは簡素できれいだと思うけど‥‥そのために犠牲にしてるものがあまりにも多すぎやしないだろうか？　と思ったり。
イラストが可愛いと思って印刷しようとしたら、CSSで無理矢理背景画像にされていてプレビューしたら空白だったとか。

例）WEBデザインのリンク集 : ikesai.com --- いけてるサイトドットコム
このサイトは印刷してもレイアウトが保たれていて素敵なんですが、唯一、トップのイラスト部分（時々変わっている）が、CSSの背景指定になってる模様‥‥。
なんだかガッカリしちゃうんですがー。

ソースが短く、簡素で美しいなんて、制作サイドのエゴでしかないのかなと思います。
使う人が不便だったら意味ないよ。
あと、PDFファイルへのリンクはPDFですってちゃんと書いて！　ビックリしますから。

Trackback URL :

札幌でフリーランスのWebデザイナーをしています。このブログは、主に日常の出来事とWeb制作に関するメモを書いています。