- ベストアンサー
cssでhtml{width:100%;}の意味がわかりません
- みんなの回答 (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は一応指定しておいた方がよさそうですね。
関連するQ&A
- min-width?を使って背景にスクロールを出さない
body内にcssでbox1をおき、そこに固定背景を指定しています。 その中にさらにbox2を置いています。 box1の幅が1000px、box2の幅が600pxだとします。 できれば、横スクロールをbox2の幅以下で出したいのです。 min-widthではIE6等には利きません・・・。 ハック、javascriptもかわまないので、どなたか効率のいいやり方を伝授していただけないでしょうか? よろしくお願いします。 何もない状態のcssを書きます。 ■CSS body{ } .box1{ width: 1000px; height: 500px; margin: 10px auto; background-color:#000; text-align:center; } .box2{ width: 1000px; height: 300px; margin: 100px auto; background-color:#fff; } ■HTML <body> <div class="box1"> <div class="box2"> </div> </div> </body>
- 締切済み
- HTML
- 【CSS javascript】ブラウザ依存 各ボックスwidthの合計値をoffsetWidthに収めたときの表示
ボックス1、ボックス2、ボックス3と3つのボックスをfloat: left;で左から横に並べて、キッチリブラウザの幅に収めたいです。 ボックス1は、width: 20%;を指定。 ボックス2は、width: 5px;を指定。 ボックス3は、ブラウザ幅に3つが収まる値をjavascriptで計算して指定したいです。 そこで、各ボックスwidthの合計値をoffsetWidth以下なら、各ボックスは折り返さずに表示されると考え、以下htmlを作成しました。 ※行頭スペースは全角です。 <html> <head> <style type="text/css"> #b1 { background-color: ffffff; float: left; height: 100%; width: 20%; overflow: auto; } #b2 { background-color: 000000; float: left; height: 100%; width: 5px; } #b3 { background-color: ffffff; float: left; height: 100%; overflow: auto; } </style> <script> i = function(id){ return document.getElementById(id) }; function init(){ var W = document.body.offsetWidth || document.documentElement.offsetWidth; var b1 = i('b1').offsetWidth; var b2 = i('b2').offsetWidth; var b3= W - b1 - b2; alert(W +' = ' + b1 + ' + ' + b2 + ' + ' + b3); i('b3').style.width = b3 + 'px'; }; </script> </head> <body onLoad = "init();" > <div id="b1">f1</div> <div id="b2" > </div> <div id="b3">f2</div> </body> </html> 上記を実行した結果、IE,Operaは折り返してしまい、FirFox,Google Chromeは折り返さずに表示できました。 IE,Operaは、なぜ折り返してしまうのでしょうか?
- ベストアンサー
- JavaScript
- CSS&HTML
はじめまして、こんばんは ご質問です。 今htmlとCSSを使いHPを作成いたしています。 二段コラムの雛型にあてはめています。 メインコラムに ボックスを指定いたしたいのですが 上手く作成できません。<div id=main> </div>の中にタグは入れられますか? mainはCSS HTML記述が終わっています。 幅 200 高さ100ぐらいのBOXボーダーラインで囲み 作成いたしたいのですがどうすれば出来ますか ボックスのタイトルをH3にしたいのですが CSSHTMLどう記述すれば いいのでしょうか ご指導ください 私がやりますとレイアウトが崩れます。
- 締切済み
- その他(インターネット・Webサービス)
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか? (オレンジ画像 width=100 height=50 でお願いします。) 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- CSS、width100%でもできる余白
CSSに関する質問です。 上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。 どうすれば中央の背景を横一杯に広げることが出来るでしょうか? また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。 コードは以下のとおりです。 HTML <html> <head><link rel="stylesheet" type="text/css" href="css.css" /></head> <body> <div id="header"> <div class="centerbox"> <div id="lang"><ul><li>EN</li><li>CZ</li></div> <div id="logo"></div> <div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div> </div> </div> <div id="contents"><div class="centerbox">contents</div></div> <div id="footer"><div class="centerbox">footer</div></div> </body> </html> CSS body{color:white; width:100%;} .centerbox{width:500px; height:100%;} a:hover{background-color:red;} /*base layout*/ #header{width:100%; height:auto; text-align:center; background-color:black;} #lang{text-align:right;} #lang li{list-style:none; display:inline; margin-left:10px} #logo{float:left; width:150px; height:80px; background-color:white;} #menu{text-aign:right; margin-top:50px;} #menu li{list-style:none; display:inline; margin-left:10px} #contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;} #footer{width:100%; height:100px; text-align:center; background-color:black;}
- ベストアンサー
- CSS
- CSSのwidthプロパティについて教えてください。
お世話になります。 フォームメールをCSSでレイアウトしています。 見出しの幅を揃えるため下記のコードを記述しましたが,labelの幅が変更できません。 ----- HTML ----- <fieldset> <label class="w1">項目</label><input class="w1" type="text" name="someone" /> </fieldset> ----- CSS ----- .w1 { width: 200px; } labelの幅は200pxになりませんでしたがinputの値は200pxになりました。 labelの幅をテーブルを使わずに揃えたいのですが その方法が分かりません。 手がかりでも良いので教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSによってIEでNNにあるmax-widthと同等の機能は?
お世話になります。 NNですとmax-widthのCSSが使えると思うのですが IEでは適用されていません。 そこでmax-widthを同等の機能を満たすようにするにはどうすればよいのでしょうか? divタグを使用しておりまして、max-widthで指定した幅を超えないようにしたいと思っております。 申し訳ありませんが、ご教授よろしくお願いいたします。
- 締切済み
- HTML
- cssの使い方について
cssの使い方について imgやswfのheightやwidthはcssで設定することはできないのでしょうか? div classで囲ってcssでwidthとheightを設定しましたが、レイアウトの前面のように浮き上がるだけでサイズ変更できませんでした。 その他の文字やボックスはcssでwidthやheightの設定ができるのに、なぜimgなどはできないのでしょうか?できるものとできないものが他にもたすうあるのでしょうか?
- ベストアンサー
- HTML
- CSSレイアウト
CSSのレイアウトについてお聞きしたいのですが、 レイアウトを決めるときwidthとheightだけを指定して 作ったボックスを重ねていく感じでレイアウトをしているですが 画面最大化にしておかないとレイアウトが崩れてしまいます。 やはりCSSでのレイアウトの場合positionで絶対値を一つ一つ 指定していかなければなれないのでしょうか? またCSSレイアウトのコツのようなものがありましたら教えて下さい どうぞよろしくお願いいたします。
- ベストアンサー
- デザイナー・クリエイティブ職
- 画像をcssでレイアウトしたいです
以下のボックスにあるイメージをボックスの左上を基準に2x2の形に並べたいです。その際にcssのpositionを使用してrelativeを指定して定義したのですがうまくいきません。正しい指定の方法を教えてください。 <div id="bottom_right"> <img src="images/image1.gif" width="176" height="57" /> <img src="images/image2.gif" width="176" height="57" /> <img src="images/image3.gif" width="176" height="57" /> <img src="images/image4.gif" width="176" height="57" /> </div>
- ベストアンサー
- HTML
お礼
具体例まで記述していただいてありがとうございます! >参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは… みなさんのおっしゃる通り、なんとなくなのかもしれませんね^^;