- 締切済み
css
プリント時の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ページの上部に グラデが表示されてしまうという事です。
- pory_bekk
- お礼率40% (46/113)
- ホームページ作成ソフト
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・ それでよいですが、「ちょっと答えが出ません」とはどういう意味でしょうか？ 印刷が想定されるページでは、印刷用のスタイルシートを用意しておきます。
お礼
＞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表記がプリント時も活きたままになっていました。