プリント時のCSS設定についておたずねします。
現在index.htmlとindex.cssがあります。
index.htmlに
-----------------------------------------------------------
<link href="index.css" rel="stylesheet" type="text/css" media="all" />
-----------------------------------------------------------
としてindex.cssを読み込み
index.css内では
-----------------------------------------------------------
body{
background:url("../images/bg_body.gif") repeat-x;
}
-----------------------------------------------------------
として、bodyの背景に画像を貼り付けています。
これを印刷時にはbodyに指定している背景画像を非表示にして
印刷させたいのです。
※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。
別途cssを用意しhtml側で
-----------------------------------------------------------
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
-----------------------------------------------------------
とすれば出来そうなのですが、ちょっと答えが出ません・・・
そもそもなぜこのような事がやりたいのかというと
コンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、
<body>に指定した画像が、2ページ目、3ページ目にも表示される為です。
背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、
一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。
151px以降は1色のベタ塗りという感じです。
ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデは
ページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部に
グラデが表示されてしまうという事です。
投稿日時 - 2009-12-14 17:02:44
1人が「このQ&Aが役に立った」と投票しています
回答（1件中 1～1件目)
別途cssを用意しhtml側で
-----------------------------------------------------------
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
-----------------------------------------------------------
とすれば出来そうなのですが、ちょっと答えが出ません・・・
それでよいですが、「ちょっと答えが出ません」とはどういう意味でしょうか？
印刷が想定されるページでは、印刷用のスタイルシートを用意しておきます。
投稿日時 - 2009-12-14 19:27:34
お礼
＞ORUKA1951さん
回答ありがとうございます。
自己解決しました。
index.cssは
-----------------------------------------------------------
<link href="index.css" rel="stylesheet" type="text/css" media="all" />
-----------------------------------------------------------
で呼び出しているので、
別途用意したprint.cssで
-----------------------------------------------------------
body{
background:none;
}
-----------------------------------------------------------
としました。
最初print.cssで、bodyに対してbackgroundの表記は削除していたのですが、
それでもなおプリント時に背景が表示されるので、いろいろ調べていく内に
index.cssの適用がmedia="all"になっている事が原因だと解り、
index.cssでのbodyに対するbackground表記がプリント時も活きたままになっていました。
投稿日時 - 2009-12-15 16:02:32
