印刷用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;
}

未分類

Posted by ponnao