■事象
以下のようなＨＴＭＬを記述する
<!doctype html> <html> <head> <title>かさなり</title> </head> <body> <div style="left:100px;top:100px;width:300px;height:100px;position:absolute;z-index:1;background-color:white;overflow:scroll;border-style: solid;border-color:red"> ここは１行目です。みえますか</BR> ここは２行目です。みえますか</BR> ここは３行目です。みえますか</BR> ここは４行目です。みえますか</BR> ここは５行目です。みえますか</BR> ここは６行目です。みえますか</BR> ここは７行目です。みえますか</BR> ここは８行目です。みえますか</BR> ここは９行目です。みえますか</BR> </div> <div style="left:150px;top:150px;width:300px;height:100px;position:absolute;z-index:2;background-color:white;overflow:scroll;border-style: solid;border-color:red"> ここは１行目です。みえますか</BR> ここは２行目です。みえますか</BR> ここは３行目です。みえますか</BR> ここは４行目です。みえますか</BR> ここは５行目です。みえますか</BR> ここは６行目です。みえますか</BR> ここは７行目です。みえますか</BR> ここは８行目です。みえますか</BR> ここは９行目です。みえますか</BR> </div> </body> </html>
これを、画面上に表示すると、こうなる。
![]()
ここまではＯＫ．
で、これを印刷しようとして、「印刷プレビュー」をみると・・・
![]()
背景が消えている。
どうしましょう・・・
■対応策
ファイル→ページ設定を選択
![]()
出てきたダイアログで「背景の色とイメージを印刷する」をチェック
![]()
そうして「印刷プレビュー」をみると
![]()
ちゃんと、できている
■注意
・上記の設定は、DIVのstyleにバックグラウンドカラー
background-color:whiteを指定しているから。
もし、この指定がなければ、ダイアログは、印刷プレビュー同様、
かさなってみえる。
・上記の例、下の箱は、スクロールして、３行目から表示されているが、
印刷では、下の箱も、１行目から印刷されてしまっている。
これは仕様のようで、印刷すると、見ているとおりではなく、
一番上から印刷される
（たとえば、Ａ４の受講票をプリントアウトすることを考えてみよう。
とうぜん、ブラウザでは全体が入らないので、受講票のどこか一部分を見ている
もし、ブラウザのとおりだったら、受講票の一部分（表示しているところ）
しか、見えなくなる。
・・・それはいやでしょ、Ａ４全部、表示してほしいよね。だから一番上から印刷される）
ちなみに、下の箱を、３行目から選択した後
![]()
印刷プレビューして、「表示されたとおりに印刷する」を、
「画面で選択されたとおりに印刷する」に切り替えると
![]()
選択部分（スクロールした状態）で表示される
以下のようなＨＴＭＬを記述する
<!doctype html> <html> <head> <title>かさなり</title> </head> <body> <div style="left:100px;top:100px;width:300px;height:100px;position:absolute;z-index:1;background-color:white;overflow:scroll;border-style: solid;border-color:red"> ここは１行目です。みえますか</BR> ここは２行目です。みえますか</BR> ここは３行目です。みえますか</BR> ここは４行目です。みえますか</BR> ここは５行目です。みえますか</BR> ここは６行目です。みえますか</BR> ここは７行目です。みえますか</BR> ここは８行目です。みえますか</BR> ここは９行目です。みえますか</BR> </div> <div style="left:150px;top:150px;width:300px;height:100px;position:absolute;z-index:2;background-color:white;overflow:scroll;border-style: solid;border-color:red"> ここは１行目です。みえますか</BR> ここは２行目です。みえますか</BR> ここは３行目です。みえますか</BR> ここは４行目です。みえますか</BR> ここは５行目です。みえますか</BR> ここは６行目です。みえますか</BR> ここは７行目です。みえますか</BR> ここは８行目です。みえますか</BR> ここは９行目です。みえますか</BR> </div> </body> </html>
これを、画面上に表示すると、こうなる。
ここまではＯＫ．
で、これを印刷しようとして、「印刷プレビュー」をみると・・・
背景が消えている。
どうしましょう・・・
■対応策
ファイル→ページ設定を選択
出てきたダイアログで「背景の色とイメージを印刷する」をチェック
そうして「印刷プレビュー」をみると
ちゃんと、できている
■注意
・上記の設定は、DIVのstyleにバックグラウンドカラー
background-color:whiteを指定しているから。
もし、この指定がなければ、ダイアログは、印刷プレビュー同様、
かさなってみえる。
・上記の例、下の箱は、スクロールして、３行目から表示されているが、
印刷では、下の箱も、１行目から印刷されてしまっている。
これは仕様のようで、印刷すると、見ているとおりではなく、
一番上から印刷される
（たとえば、Ａ４の受講票をプリントアウトすることを考えてみよう。
とうぜん、ブラウザでは全体が入らないので、受講票のどこか一部分を見ている
もし、ブラウザのとおりだったら、受講票の一部分（表示しているところ）
しか、見えなくなる。
・・・それはいやでしょ、Ａ４全部、表示してほしいよね。だから一番上から印刷される）
ちなみに、下の箱を、３行目から選択した後
印刷プレビューして、「表示されたとおりに印刷する」を、
「画面で選択されたとおりに印刷する」に切り替えると
選択部分（スクロールした状態）で表示される