印刷用CSSに即席で真剣に取り組んでみた
すごく参考になるページがあって、ここを見ながらやりました。
http://www.rasen-d.net/first-css/file28.html
@import url(“print.css”);
urlのおしりに「print;」をつけなければいけないことに気付き、以下の表記に変更。
@import “print.css” print;
◆ie8バグ
上のページにieだとバグ出ると書いて合ったのですが、
8だったら大丈夫かなと思って試しにやってみたが、やっぱりダメだったので、
最終的には、ページのhead内にprint.cssへのリンクを入れました。
これでやっとie8でも反映。バグが解消されるまではこの方法が確実か。
css自体はここを参考にして、以下のような感じにしました。
http://d.hatena.ne.jp/aratako0/20070421/p1
display: none;等の設定は、自分の作ったid名class名を調べながら、やるしかないですね。
今回は記事枠幅を横いっぱいに伸ばしたかったのだが、
元々100％になってたので、やりやすかった。
pxで設定してあったら、調整の必要があったかも。
/***********************************************/
/* 印刷用
/***********************************************/body {
font-size: 12pt;
color: #000000;
background-color: #FFFFFF;
background-image:none;
}a:link,
a:visited {
text-decoration: underline;
color: #000000;
}img {
border: 0;
}#area-mainmenu,
#area-submenu,
#footernavi {
display: none;
}#area-content{
width:100%;
margin:0;
padding:0;
}.back-hosting{
background-image:none;
}#area-content{
border:none;
}