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

Question

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

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

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

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

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

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

SAYKA · Accepted Answer

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

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

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

ORUKA1951 · Answer

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

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

taloo · Answer

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

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

ORUKA1951 · Answer

＞しかし、これって、ブラウザ見た目と、出力用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、両方用意するのにかなりの労力を使うような・・・。」という問題ではないのが理解していただけるかと思います。

ORUKA1951 · Answer

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

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

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

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

ブラウザ上では変らなく見えるかもしれないけれど

＞おそらく印刷もちゃんと意識しているサイトなのでしょうね。

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

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

この回答への補足

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

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング