css

締切済

質問者：pory_bekk
質問日時：2009/12/14 17:02
回答数：1件

プリント時の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ページの上部に
グラデが表示されてしまうという事です。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2009/12/14 19:27

別途cssを用意しhtml側で

-----------------------------------------------------------
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
-----------------------------------------------------------
とすれば出来そうなのですが、ちょっと答えが出ません・・・
　それでよいですが、「ちょっと答えが出ません」とはどういう意味でしょうか？
　印刷が想定されるページでは、印刷用のスタイルシートを用意しておきます。

- 0
- 件

通報する

この回答へのお礼

＞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表記がプリント時も活きたままになっていました。