• ベストアンサー
  • 暇なときにでも

cssでhtml{width:100%;}の意味がわかりません

  • 質問No.4880771
  • 閲覧数4289
  • ありがとう数4
  • 気になる数0
  • 回答数5
  • コメント数0

お礼率 71% (20/28)

いつもお世話になっております。
早速質問です。
あるサイトのCSSを拝見すると、以下の様な記述がありました。
html{
width : 100% ;
height : 100% ;
}

body{
width : 100% ;
height : 100% ;
}
BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。
上記のCSSの意味を教えてください。
宜しくお願いします。

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

  • 回答No.5
  • ベストアンサー

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

私も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%)でも結果は同じでいずれも「ウィンドウサイズ一杯」の幅でレンダリングされます。
お礼コメント
ky_qa0903

お礼率 71% (20/28)

具体例まで記述していただいてありがとうございます!

>参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは…

みなさんのおっしゃる通り、なんとなくなのかもしれませんね^^;
投稿日時:2009/04/16 09:48

その他の回答 (全4件)

  • 回答No.4

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

すみません、書き漏れていました。;

正確には、%で指定するために必要な物、だと思います。
例えばボックスの縦幅を、画面いっぱいに広げたい時に
ただ100%と指定しても反映されないのですが、
html,bodyに数値を設定しておけば反映されるようになるのです。

『body hright:100%;』で検索すると色々情報が出てきますので
ぜひそちらをご参考下さい。
お礼コメント
ky_qa0903

お礼率 71% (20/28)

>『body hright:100%;』で検索すると色々情報が出てきますので
私自身も色々検索してみたのですが、width:100%;で検索していたため上手く検索できませんでした(汗)。
『body hright:100%;』で調べてみます。
ありがとうございました。
投稿日時:2009/04/16 09:38
  • 回答No.3
訂正します

垂直水平中央配置のために必要だと思い指定されたものだと思いますが
  • 回答No.2
特に意味は無いと思います。
height:100%;とあるので垂直水平中央配置のために必要だと思いますが、無くても問題ありません。
お礼コメント
ky_qa0903

お礼率 71% (20/28)

ご回答ありがとうございます。
垂直水平中央配置ですか、なるほど!この単語について調べてみますね。
投稿日時:2009/04/15 12:29
  • 回答No.1

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

heightの方は、body以下のブロックレベル要素に高さを指定するための設定ですね。
(多分)普通は併せてmargin:0;padding:0;なども指定すると思います。
widthの方は私はちょっとわからないですね。。。
お礼コメント
ky_qa0903

お礼率 71% (20/28)

早速のご回答ありがとうございます。
おっしゃる通り、margin:0;padding:0;の指定もされています。
heightは一応指定しておいた方がよさそうですね。
投稿日時:2009/04/15 12:26
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ