印刷css

印刷の時、画像が切れたり、文字が切れたした時ありませんか？

この間、そんな事がありまして、何とか解決致しました。

これは拡大/縮小の指定ですが、

IEでのみ対応可能なので他のブラウザでは、
出来ませんがIEを使っている場合は、良いと思います。

まず、ページのヘッダー部分に、＜link rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” /＞
と記述しスタイルシートを読み込ませます。

そして、print.cssを用意してもらって、
その中に、自分が印刷した時拡大/縮小させたい部分を記述。

その中のfloat: left;の部分をzoom: ;と記述
：　；の中には拡大したい場合１などの数字をいれます。
縮小したい場合は0.5などの数字をいれます。

そうするとA4の紙一枚に全てが収まります。
大きさは縮小とか拡大なので、画像とかの場合は小さくなったりしますが、
ページを一枚に収めたい時などには有効です。

わかりにくいかもしれませんが、上の例として、
印刷用CSSの一部です。

div.p3 dl {
zoom:0.78;　（　ここがfloat: left;だった場所！）
margin: 0;　（自分の環境に合わせて変えます。）
padding: 0;　（自分の環境に合わせて変えます。）
width: 180px;
}

div.p3 dt {
zoom:0.78;　（　ここがfloat: left;だった場所！）
margin: 0;　（自分の環境に合わせて変えます。）
padding: 0;　（自分の環境に合わせて変えます。）
list-style: none;
width: 170px;
border: 1px solid #999999;
text-align: center;
}

[お知らせ]twitterアカウント(gogo_kato)能代の何処からでもツイートします！