- ベストアンサー
cssでｈｔｍｌ｛width:100%;｝の意味がわかりません
いつもお世話になっております。 早速質問です。 あるサイトのCSSを拝見すると、以下の様な記述がありました。 html{ width : 100% ; height : 100% ; } body{ width : 100% ; height : 100% ; } BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。 上記のCSSの意味を教えてください。 宜しくお願いします。
- みんなの回答 （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%）でも結果は同じでいずれも「ウィンドウサイズ一杯」の幅でレンダリングされます。
その他の回答 (4)
- reverie013
- ベストアンサー率18% (26/143)
すみません、書き漏れていました。； 正確には、％で指定するために必要な物、だと思います。 例えばボックスの縦幅を、画面いっぱいに広げたい時に ただ100%と指定しても反映されないのですが、 html,bodyに数値を設定しておけば反映されるようになるのです。 『body hright:100%;』で検索すると色々情報が出てきますので ぜひそちらをご参考下さい。
お礼
>『body hright:100%;』で検索すると色々情報が出てきますので 私自身も色々検索してみたのですが、width:100%;で検索していたため上手く検索できませんでした（汗）。 『body hright:100%;』で調べてみます。 ありがとうございました。
訂正します 垂直水平中央配置のために必要だと思い指定されたものだと思いますが
特に意味は無いと思います。 height:100%;とあるので垂直水平中央配置のために必要だと思いますが、無くても問題ありません。
お礼
ご回答ありがとうございます。 垂直水平中央配置ですか、なるほど！この単語について調べてみますね。
- reverie013
- ベストアンサー率18% (26/143)
heightの方は、body以下のブロックレベル要素に高さを指定するための設定ですね。 (多分)普通は併せてmargin:0;padding:0;なども指定すると思います。 widthの方は私はちょっとわからないですね。。。
お礼
早速のご回答ありがとうございます。 おっしゃる通り、margin:0;padding:0;の指定もされています。 heightは一応指定しておいた方がよさそうですね。
お礼
具体例まで記述していただいてありがとうございます！ >参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは… みなさんのおっしゃる通り、なんとなくなのかもしれませんね＾＾；