Home > archives > html要素とbody要素のbackground-color

html要素とbody要素のbackground-color

html要素とbody要素に背景色をあてて遊んでいたところ(*1)、不思議な現象が発生しました。

まず、XHTML1.0 Strictで以下のようなページを作成します。

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html,body要素の考察</title>
</head>

<body>
    <h1>html,body要素の考察</h1>
    <pre>...</pre>
    <address>Copyright © 2006-2007 miniturbo.org All Rights Reserved.</address>
</body>
</html>

そのページに以下のCSSを適用します。

html,
body {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    background-color: #82a2a8;
}

body {
    height: 100%;
    background-color: #90a882;
}

すると、以下のようなページになります。

サンプル01

サンプル01

断面図にするとこのような感じですね。

サンプル01 断面図

その後、body要素に高さを指定します。

body {
    height: 80%;
}

すると、以下のようなページになります。

サンプル02

サンプル02

その後、html要素の背景色を透明に指定します。

html {
    background-color: transparent;
}

すると…

サンプル03

サンプル03

…わかりやすくするため、body要素にborderを指定してみます。

body {
    border: 2px solid #b86f4f;
}

すると以下のように…。

サンプル04

サンプル04

おわかりでしょうか？bodyの領域はborderに囲まれた部分なのに、背景色は全体に描画されているんですよね。なんでだろう。ちなみに、以下のブラウザで同内容の現象が発生しました。

  • Firefox 2.0
  • Opera 9.1
  • Netscape 7.1
  • IE7
  • IE6(標準準拠モードで確認)

背景のレンダリングに関して、個々のブラウザの実装ではなく共通したアルゴリズムかなにかがあるのでしょうか？誰か詳しい人、教えてください＞＜

*1. 普段は、もっと明るい遊びをしています。また、ちゃんと仕事もしています。

Comments:4

hinatayuki 07-02-27 (火) 21:11

はじめまして。

仕様書ではそのレンタリングが推奨(should)されているようです。

cho45 07-02-27 (火) 22:52

気になったので調べたのですが、仕様で言及があります (CSS の仕様に HTML の言及があるのがキモいですね)

しかし，HTML文書の場合, 文書作成者がHTML要素ではなくてBODY要素に関して背景を指定することを推奨する。利用者エージェントは, 次の優先規則を遵守して，背景を埋めることが望ましい。HTML要素に関する’background’特性の値が’transparent’ではない場合は，その値を使用し，それ以外の場合は，BODY要素に対する’background’特性の値を使用する。その結果の値が’transparent’となる場合は, レンダリングは定義されない。

めんどいので日本語訳から！

全然関係ないですけど、コメントのプレビューに CSS があたってない＞＜かなしい！

rea 07-02-28 (水) 0:23

ちょっとだけ補足です。
ブラウザによってはhtml要素に指定したスタイルを無視したり、body要素のスタイルを優先する場合があります。仕様書にもあるように、body要素に指定するのが安全ですね！

miniturbo 07-02-28 (水) 1:06

＞hinatayukiさん
はじめまして!コメントありがとうございます!
ああ、仕様書にはっきりと記述されているのですね…orz
W3Cにて仕様書は確認したのですが、「14.2.1 Background properties」から飛ばして読んでいました。…確認不足でした。
ご教示ありがとうございます＞＜

＞cho45さん
あわわ、わざわざ調べてくれてありがとうございます!!
CSSってHTML専用の言語じゃないのになーと思わせる記述ですね。
実はこの記事を書いた後に、id:amachangさん協力の下、JSで検証してみたのですね。
やはりbody要素は特殊らしく、一度documentElementをremoveChildしてから、

<hoge>
    <fuga />
</hoge>

のようにappendChildして同じように検証してみたところ、この記事とは異なる結果となりました。
うーん、body要素…恐ろしい子！
あ、コメントの件ですが、古いテンプレートで再構築してしまっていたみたいです。かなしませてごめんなさい＞＜

＞reaさん
html要素ってどこまで遊べる(*2)のかやってみたんですけど、おっしゃる通りブラウザによってできることはまちまちなんですね。もともとがXULでできているFirefoxだと、かなり自由にできてとても楽しかったです。
body要素に指定しておけば◎ですね!でもhtml要素でどこまで遊べるか知っておくとさらに楽しい気もします＞＜

ひぃひぃ、本当に皆さんコメントありがとうございます！また、仕様も確認していない愚か者の称号を手に入れてしまった…

Comment Form
Remember personal info

Home > archives > html要素とbody要素のbackground-color

Pages
Categories
Search

Return to page top