ベストアンサー

cssでｈｔｍｌ｛width:100%;｝の意味がわかりません

2009/04/15 10:07

いつもお世話になっております。早速質問です。あるサイトのCSSを拝見すると、以下の様な記述がありました。 html{ width : 100% ; height : 100% ; } body{ width : 100% ; height : 100% ; } BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。上記のCSSの意味を教えてください。宜しくお願いします。

ky_qa0903
お礼率71% (20/28)

HTML
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/04/15 14:26 回答No.5

私もNo.2-3様のご指摘の通りだと思いますが。参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは…具体的なソースを見ていないので、明言は避けますが。自分が制作する上ではそういう指定をする必要性に迫られた事はないですね、今のところ。そもそも、"width: 100%;"というのは「直近の親要素の幅に対する100%」です。html要素は「ルート要素（最大の親要素）」であり、それより上位の親要素は存在しないので、ディフォルトの幅はウィンドウサイズ全体と考えて良いのですから、そこに100%を指定してもただ無意味なだけだと思いますが。ちょっと気になる発言があったので以下はそれについての蛇足ですが… htmlやbody要素に何も幅が指定されていなくても、bodyの直接の子要素に位置するコンテナブロックであればディフォルトもしくはその要素へ直接"width: 100%;"を指定してもその横幅は画面サイズ一杯に広がりますよ。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link href="css/sample.css" type="text/css" rel="stylesheet" media="all" /> <title>サンプル</title> </head> <body> <div id="hoge1"> 幅無指定のボックス </div> <div id="hoge2"> 幅100%で指定のボックス </div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; } div#hoge1 { background: #fcc; } div#hoge2 { width: 100%; background: #ccf; } ---------------------------------------------------------------------- 上記では、hoge1（widthの値はディフォルト）もhoge2（widthの値は100%）でも結果は同じでいずれも「ウィンドウサイズ一杯」の幅でレンダリングされます。

質問者

お礼 2009/04/16 09:48

具体例まで記述していただいてありがとうございます！ >参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは… みなさんのおっしゃる通り、なんとなくなのかもしれませんね＾＾；

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

reverie013
ベストアンサー率18% (26/143)

2009/04/15 12:52 回答No.4

すみません、書き漏れていました。；正確には、％で指定するために必要な物、だと思います。例えばボックスの縦幅を、画面いっぱいに広げたい時にただ100%と指定しても反映されないのですが、 html,bodyに数値を設定しておけば反映されるようになるのです。『body hright:100%;』で検索すると色々情報が出てきますのでぜひそちらをご参考下さい。

質問者