CSSで「html」にも背景指定をするのはどのような場合？

質問

CSSで「html」にも背景指定をするのはどのような場合？
CSSの背景指定に関する質問です。
ページ全体の背景色や背景画像を指定する場合、
自分は下記のように記述をしています。

body {
background:url(画像名) repeat-x #背景色;
}

しかし、たまにhtmlにも背景を指定しているものを見かけます。
下記のような感じです。

html,body {
background:url(画像名) repeat-x #背景色;
}

どういったケースでhtmlにも背景を指定する必要があるのでしょうか？

もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、
何か不具合が起こる？と思い自分なりに実験してみましたが、
特に何も変化は無しでした。
(Firefox、IE6でチェック)
分かる方いらっしゃいましたら回答をお願いいたします。

回答No.1

SAYKA · ベストアンサー

ブラウザ上では変らなく見えるかもしれないけれど
印刷すると影響が出るよ。

htmlが紙、bodyが印刷範囲　だったかな。
bodyのmarginは余白として扱われた筈だけど　文献がすぐ見つからないや・・・

そういう認識であれば　どちらがどう違うかっていうのは　判ると思うけれど・・・
tableのtdとその中のdivの話みたいなものじゃないかな。

お礼

早々に回答をありがとうございます！
なるほど、紙出力したときに違いがあるのですか・・・
おそらく印刷もちゃんと意識しているサイトなのでしょうね。

回答No.5

ORUKA1951

＞下記のようにhtmlを加えて記述する必要があるのはどのようなときなのかを知りたいと思っています。
　私が知らない何かがあるのかもしれませんが、

・書いても意味ないとは、いずれbodyで上書きされるので、html,body{}とする意味がないということです。(後から現れた単純セレクタで上書きされる仕様)
・その意味ではなく、html,body{padding:0px;margin:0px;と一緒についでに背景なども書いているだけ。これが可能性としては高い
・XHTMLだと、表示されるときに周囲に余白を置くブラウザがあるため・・
　これについては、html,body{padding:0px;margin:0px;}で対処してしまうので、未確認です。たとえそれで回避できても、bodyの背景とはずれてしまうはず。

　XHTMLでページを作成してためしてみてください。きちんとDOCTYPEを入れたり外したりして。

お礼

本当に何度もありがとうございます。

＞XHTMLだと、表示されるときに周囲に余白を置くブラウザがあるため・・
Operaやchrome等々で検証していないのですが、おっしゃる通りかもしれません。
ちなみにページはXHTMLで作成しています。
DOCTYPEは入れる、XML宣言は無し。StrictやTransitionalだったりでも変わるのかな？

＞書いても意味ないとは、いずれbodyで上書きされるので、
＞html,body{}とする意味がないということです。
＞(後から現れた単純セレクタで上書きされる仕様)
そういう意味だったんですね・・・私もそうだなと思っていたので、
故にわざわざhtml,body{}とすることに疑問を持っていた次第です。

今までbodyのみで特に何の不具合にも出くわしたこともないので
それで良いのか、もしくは何か理由があり、html,bodyにしておいた方が良いのか
悩んでいたところです。

もしかしたらそんなにこだわるところでは無いのかも・・・。
検証対象のブラウザでくずれない、印刷に対応もした場合、
出力してみて問題がなければOK、ってことかもしれませんね。

お時間を割いて回答いただき、再度、ありがとうございました。

回答No.4

ORUKA1951

＞しかし、これって、ブラウザ見た目と、出力用CSS、両方用意するのにかなりの労力を使うような・・・。

　ちょっと違う。

　最初の質問は、htmlというタイプセレクタ(要素)に背景が設定してあるのはなぜかという質問でしたね。これは、backgroundが継承されないプロパティですから、意味がないと回答しました。

　当初の質問に関してはここでおしまい。

　印刷に言及したのは、#1さんの回答とそれに対して質問者さんが「おそらく印刷もちゃんと意識しているサイトなのでしょうね。」というメッセージがあったからです。
　もし、印刷にしろスクリーンにしろ余白を生じさせないためでしたら、html,body{margin:0px;padding:0px;}という宣言を最初に書くだけでよいはずです。実際にこれはよく使われます。特にページがXHTMLの場合には欠かせません。
　その場合、もう一度bodyだけセレクトしてbody{background***}とするのが面倒な人は、html,body{margin:0px;padding:0px;background:*******;line-height:****}などと設定されているのかもしれません。という意味です。これは印刷を想定しているのではなく、あくまで余白を生じさせないための設定に引き続いて、同じセレクタで続けて書いているだけなのではないかと想像しています。

　本当に印刷を目的にCSSを書くなら、スクリーン用と印刷用は全く別の物になります。

　スクリーンの表示させる場合は、ウィンドウサイズで完結させるか、スクロールで縦長のいずれかが多いでしょう。しかも、ウィンドウ幅は実に様々で、縦長もある。スクリーン用はそれらに対応できるようにしなければなりません。
　一方プリントで印刷される場合、ページ出力の場合はページごとの印刷を考えなければなりません。基本的に用紙サイズを指定した固定デザインが主流となるでしょう。

　印刷用のスタイルシートを用意しなさいというのは、単純にスクリーン用のスタイルシートを使って画面を見たままに印刷するのとはわけが違います。
　たとえば、
　スーパー輪投げ(Super Quoits) ( http://iruka.la.coocan.jp/craft/Quoits/recipe.html )
　は、印刷用スタイルシートが用意してありますが、「しかし、これって、ブラウザ見た目と、出力用CSS、両方用意するのにかなりの労力を使うような・・・。」という問題ではないのが理解していただけるかと思います。

補足

何度も回答いただき感謝いたします。
前回の回答を拝見した時に、回答者様が「スクリーンでの見た目＝紙出力」させるには、という前提で答えてくださったのかと思い込んでしまいました。「画像を背景にせず、absoluteで文字をのせる」や「list-style-image」という内容がでてきたので。。。
「htmlになぜ背景を指定するのか、という自分の質問から、回答の内容がズレているな」と思いつつお礼を書いてしまった次第です。当方の理解不足で申し訳ありません。

＞本当に印刷を目的にCSSを書くなら、スクリーン用と印刷用は全く別の物になります。
これは理解しているつもりです。自分もA4の紙におさまるようにprint用のCSSを用意することもあります。

＞backgroundが継承されないプロパティですから、意味がない
この「意味がない」というはどこの部分に対して、「意味が無い」というのがよく理解できないのですが。

質問の仕方を変更しますね。
■ブラウザの見た目のみ、特に紙出力の見た目は意識しない場合
「html」には背景指定する必要は無く、「body」のみで構わない？

最初の質問の繰り返しになりますが、

body {background:・・・}

では無く、下記のようにhtmlを加えて記述する必要があるのはどのようなときなのかを知りたいと思っています。

html,body {background:・・・}

#1の回答者様へのお礼として「紙出力を意識したサイト」と書いてしまったのが、誤解の元かと：（すみません）単に「紙出力したときに余白を表示させないことを意識したサイト」という意味で書いたつもりでした。

回答No.3

神崎 渉瑠（@taloo）

> 印刷をちゃんと想定するなら、印刷用スタイルシートを用意する。

screenとprintの両方に対応したスタイルシートを用意すれば、わざわざ個別に作る必要はないと思いますが？

お礼

回答ありがとうございます。
＞screenとprintの両方に対応したスタイルシートを用意すれば、わざわざ個別に作る必要はないと思いますが？
それが楽ですよね。
自分もprint用のスタイルシートを作ることもありますが、それは文字サイズをピクセル指定したり、あえて背景は出力されないように（インクもったいない・・・；）消す、等の記述をしています。
＃１の回答者様によるとbodyにpaddingやmarginを入れると紙出力で余白がでてきちゃうみたいですね。
これを避けるには印刷用CSSにbody {padding:0;}を入れてあげたらいいのかな？
お礼とも質問ともつかない感じですみません。。。

回答No.2

ORUKA1951

＞おそらく印刷もちゃんと意識しているサイトなのでしょうね。
それはないでしょう。単純にCSSを簡略化したいだけ。background-imageは継承されないプロパティなので意味ないし・・。
　印刷をちゃんと想定するなら、印刷用スタイルシートを用意する。
　その場合、背景ではなく画像として配置したうえで、absoluteで文字を重ねる。あるいはdisplay:list-item;とlist-style-imageを組み合わせるなどを使います。
　html,bady{margin:0px;padding0px;background:url(++++) repert center blue;}とか、他のプロパティもまとめてあるはず。こうすることで余白なしでHTMLでもXHTMLでも表示される。
　画像を背景として印刷させるなら、確実なのはHTML自体に画像を書く方が良い。
<body>
<p id="Top" style="display:none"><img src="++++"></div>
<div>
　<h1>・・・・・

print.css
p#Top{display:block !important;margin:0px;}
p#Top img{width:+++;height:+++;}
とか

お礼

回答ありがとうございます！
＞その場合、背景ではなく画像として配置したうえで、absoluteで文字を重ねる。
ブラウザや設定により、CSSでの背景は印刷されたりされなかったり、だと思うのですが、
おっしゃるとおりにすると環境に左右されずブラウザ表示と紙出力の見た目が
同じになる、ということですよね？（理解不足で違っていたらすみません）
しかし、これって、ブラウザ見た目と、出力用CSS、両方用意するのにかなりの労力を使うような・・・。