初心者です。DreamweaverCS4を使っています。

質問

初心者です。DreamweaverCS4を使っています。
プリントの際に、白枠とか白文字を正しくプリントさせるには、どのようにCSSで指定していけばよいのでしょうか？
また、左側にナビを配置してますが、プリント時に、ナビだけを印刷させないようにすることはできますか？

回答No.1

salonpath · ベストアンサー

>白枠とか白文字
ブラウザに表示されているままを印刷したいって事ですか?
だとしたら、背景を印刷するかどうかは観覧者側の環境に依存しているので不可能です。
背景を含めて印刷してくださいといった注意と、各ブラウザ毎で背景を印刷する為の設定方法を書いておくのが良いと思います。

内容が伝わるように印刷できればよいのなら
印刷用のcssを用意して枠線やfontの色を変更すれば解決します。
(外部css読み込みのmedia属性をprintにすれば印刷時に読み込まれます / media="print")

すでにちゃんとしたhtmlで制作しているのならスクリーン用のcssを印刷時に読み込まないように設定すれば大丈夫だと思いますよ。

お礼

ありがとうございました。しくみがわかりました。
丁寧な参考で、とてもわかりやすかったです。
感謝いたします。

補足

丁寧な御回答ありがとうございます。重ねて質問したいのですが、
htmlには、media-"print"の表記をのせていますが、pront用のCSSには、替えたい文字や枠の注記だけを用意するのか、
その他の替えなくてもよい全てのCSSも表記しておくのか、どちらでしょうか？
初歩的な質問ですみません。

回答No.2

salonpath

■css / head内にコピペ
<style type="text/css" media="screen">
body{
text-align:right;
font-style:italic;
}
</style>

<style type="text/css" media="screen,print">
body{
color:white;
background:black;
font-weight:bold;
}
div{
padding:1em;
margin:1em;
border:1px solid blue;
width:900px;
}
</style>
<style type="text/css" media="print">
body{
color:red;
background:white;
}
div{
width:auto;
}
#navi{
display:none;
}
</style>

■html / body内にコピペ
<div id="wrap">
<div id="navi">menu</div>
<div id="content">content</div>
</div>

上記をコピペして、ブラウザと印刷プレビューで見比べてみると参考になるかもしれません。

media=screenのcssは印刷時に読み込まれてません、
screen,printのcssはブラウザでも印刷時どちらにも反映します。
そして最後のprintはscreen,printのcssを上書きしています。

>替えたい文字や枠の注記だけを用意するのか、
>その他の替えなくてもよい全てのCSSも表記しておくのか、どちらでしょうか？

どんな風にするのが目的なのか、わからないのでなんとも言えないですが
・ブラウザ用のレイアウトを使い回したいなら印刷用CSSを後から読み込んで上書き
・修正箇所が沢山あるのなら、ブラウザ用のcssは印刷時に読み込まないmedia属性に変更して、印刷用CSSを用意。
が楽なんじゃないでしょうか。