ブログ更新:プリントCSS&印刷時のみ文章を表示

家のネットの調子がおかしいです。
ルーターが壊れかけてるみたいで繋がったり繋がらんかったり。
レスポンス遅くなるので申し訳・・・;;
無線Lan飛ばしてるんですが、もう近々はずそうかと。
PSPで見ても自サイトレイアウト崩れて見れへんし。もうそこまで対応は勘弁;;;
あ、でも携帯ではなんとかひととおり見れるんですよ。フルブラウザでは全く問題なし。
ちゃんと見れてるとね、コーダーとしては嬉しかったりします。

先日、とある病院のHPの仕事で、「地図のページをプリントした時だけでいいんやけど、
診察日と診察時間も表示させてたら、親切なんじゃないかと思うんやけど、出来る?」
という質問が来ました。

プリントCSSで好きなレイアウトでのプリントは可能だけど・・・
問題は、プリントしたときだけ表示させるというところ。
もともとある部分をプリントの時は表示させないのは簡単なんだけど、逆パターンはできるんやろか?と。

一応できたみたいなので忘れないようメモしときます~。

その前に少し脱線しますが、まずはプリントCSSって何ぞや?というところから。

なんでプリント用にCSSを設定するのかというのは、プリントしたい内容がちゃんと印刷できるように&
キチンと用紙サイズ内で納めるため。・・・かな?(←いい加減な)
幅指定、フォント指定、リンク指定は最低限設定する必要があるんです。
ブラウザは動的、紙ベースは静的やからね。
文字がちゃんと見えるように~とか、リンクがどこに貼ってあるとかね、
一目で見て分かるようにもしないといけないワケです。

<link rel="stylesheet" type="text/css" href="普通のスタイルシートアドレス" media="all">
<link rel="stylesheet" type="text/css" href="印刷用のスタイルシートアドレス" media="print">

ブラウザ用のCSSには“all”、プリント用のCSSには“print”をいうふうに指定します。
これは外部スタイルシートをリンクする方法。
場合によっては、
@media print {/* 印刷用スタイル */} でブラウザ用CSSに直接書き込むか、
@import url(“印刷用のスタイルシートアドレス”) print; でインポートさせてもOKみたいっすね。

——————————————————–
印刷CSSで指定しておいた方がよいこと。
——————————————————–
・紙サイズに納まるように、全体の幅を100%、または640pxぐらいに設定。
・モノクロプリントの事を考えて、フォントは黒、またはグレーが理想。
・サイズは14pt(ptで指定)ぐらいが見やすい。
・ヘッダー・フッター・メニュー等、froetで指定している部分や不要な部分はdisplay:none;で表示させない。
・リンク部分はアンダーバーをひいてわかりやすく。

思いついたのはこれくらいかな・・・。
調べたら出てきたんですが、ブラウザ用のスタイルでposition:absolute;を使用しない方が
いいらしいです。IEがフリーズするらしい・・・ですよ。恐ろしい…

で、前置き長かったですが、お題のプリント時にのみ表示させたいというところですが・・・

ブラウザ用CSS(web.css)で
#printer {display: none;}
と指定。

次にプリント用CSS(print.css)で
#printer {
color: #FF0000;
margin-top: 50px;
font-size: 18pt;
display: block;
}
を指定。

<html>
<head>
<link rel="stylesheet" type="text/css" href="web.css" media="all">
<link rel="stylesheet" type="text/css" hrel="print.css" media="print">
</head>
<body>
<p id="printer">印刷時のみ見えます</p>
</body>
</html>

これで、ブラウザでは「印刷時のみ見えます」の文字が表示されず、
プリント時だけ赤の18ptで印刷されます。

display: none;で消しているのなら、display: block;で領域を指示してあげればいいのでは?という
よく考えたら簡単な発想でした(^^;)

プリント時のみ表示させるってなんかプロっぽいっすよねvv
出力したらおまけイラストが出てくるとか、そういう感じに使ったら面白いかも~

自分のサイトにも設定してみようかな☆

コメントを残す