• ベストアンサー

bodyにwidth:100%をつける理由は？

bodyにwidth:100%をつける理由は？ たまに、bodyにwidth:100%をつけているのですが、理由がわかりません。 boduのwidthはブラウザの横幅ではないのでしょうか？ 実際、下記コードで、両方とも結果は同じです。 <body style="background:red;width:100%"> aaaa </body> <body style="background:red;width:50%"> aaaa </body> どなたかお教えいただければ幸いです。

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

こんなところで聞いたってまともな答えは得られない。なぜ仕様書を確認しないのですか？？ 4.3.3 パーセント値( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#percentage-units ) 6.1 指定値、算出値、実効値( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#value-stages ) 8 ボックスモデル( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html ) 10.2 内容の幅: 'width'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-width-property ) 　特に「10.1 "包含ブロック"の定義」 　これだけの情報が絡むので、ここで説明しきれる内容ではありません。 bodyに幅を指定しても、その祖先にstaticでない参照すべき親コンテナブロックがないのですから無意味です。 html{margin:20px;position:relative;} body{width:50%;margin:0 auto;} 　仕様書だけはかならず目を通しておきましょう。そうしないとつまらないところで足踏みしてしまう。 <body style="background:red;width:100%"> aaaa </body> 　こんなHTMLはありえません。こんなことしてるとだめです。bodyにはブロック要素しか置けません。 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY ) それがないため、ブラウザは匿名ボックスを作ってしまいます。そうすると、スタイルシートがうまく機能しなかったり・・ 　⇒メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • IEでmax-width

    <html> <style> body { width:100%; margin:0; padding:0;} p { border:1px solid red; max-width:800px; width:expression(document.body.clientWidth > 800? "800px": "auto" ); } </style> <body> <p> ここに長文コピー＆ペーストしてください。 </p> </body> </html> このような物を見つけました。 この部分 document.body.clientWidth > をブラウザ幅からIDをつけた親要素の幅（IDはなくてもいい）に変えることはできないでしょうか。 minmax.jsはなしの方向でお願いします。

  • ブラウザによる「width」の違い

    <html> <body style="background-color:#FFFFFF;color:#000000;font-weight:nomal;margin:0%;"> <div style="border:solid 2px #000000;margin:10% 0% 10%;"> <div style="margin:5% 10% 8%;"> <table border="1" style="width:100%;"> <tr><td bgcolor="#3399FF">A1セル</td></tr> </table> </div> </body> </html> 上のソースは抜粋です。 上のソースをIEで開くと、一画面から横にあふれてスクロールする様な表示になってしまいます。 しかし、全く同じソースをOperaで開くと、 (Operaが入っていないと思うので)<table>のwidthを100%から700pxくらい(人によって解像度で変わってきますが)にしてIEで表示したときのように、画面からあふれることはく、ちょうど真ん中にきれいに表が収まります。 ブラウザによって、widthの基準となる幅がブロックだったりウィンドウサイズだったりしているんだと思うのですが、どうすれば両方のブラウザで同じ表示をさせることができるのでしょうか… 絶対数値で固定してしまえば早いのですが、できれば相対数値で幅を整えたいので…

    • ベストアンサー
    • HTML
  • div#left {width:50%;

    div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？

  • IE以外は色が付かない　なぜ？

    <html> <head> <title>test</title> <style type="text/css"> } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test <div> </body> </html> このコードを実行するとＩＥだと、色が赤くなるのですが スレイプニルやグーグルのブラウザだと何も色が付きません。 なぜでしょうか？

    • ベストアンサー
    • HTML
  • 隙間があく理由

    以下のHTMLを見ると隙間がキャンバスの下に開きます。 クロム　IE　ファイヤーフォックス似て確認。 なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style> <!-- *{ margin:0px; padding:0px; border:none; } canvas{ width:100px; height:50px; background-color:red; } div{ width:100px; height:50px; background-color:green; } --> </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------

    • ベストアンサー
    • CSS
  • widthとmax-widthについて。。。

    cssについて、困っています。アドバイスを何卒宜しくお願い致します。 widthとmax-widthですが、あまり理解できていません。。 可変式にブラウザウィンドウのサイズを変更しても思うように画像要素が小さくなっていくようにして作っているのですが、どこにmax-widthで％指定し、どの場合はwidthで%指定するのか、または両方指定するのかが把握できておらず、 最終的に形にはなり、完全にレスポンシブ化できるのですが、このままではいつか痛い目にあうだろうなと思い調べたりしているのですが解決に至らずご質問いたしました。ご教示いただければ幸いです。 何卒どうか宜しくお願い致します。

    • ベストアンサー
    • CSS
  • floatを使用したレイアウトでbody全体を中央寄せするには？

    floatを使用したレイアウト(下記)で、body全体の中央寄せを実現するには、CSSでどのように記述すれば良いのでしょうか？ <body> <div> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> DIV#left　 { width: 10px;float:left;background:red;} DIV#center { width:300px;float:left;background:green;} DIV#right　{ width: 10px;float:left;background:blue;}

    • ベストアンサー
    • CSS
  • CSSでfloatした要素の高さを100%にしたい

    はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。　heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html> 

    • ベストアンサー
    • CSS
  • divタグを中央寄せでwidthを指定したい。

    Webのデザインを行っているのですが、以下のような事象に困っています。 ブラウザはGoogle chromeです。 <body> <div style="text-align:center;"> あいうえお </div> </body> これは中央寄せになるのです。しかし、 <body> <div style="text-align:center;width:400px;"> あいうえお </div> </body> こうすると、中央寄せが解除されてしまいます。 どうしてこうなるのでしょうか？ 出来れば理由も含めて理解したいのですが、教えて頂けないでしょうか。

    • ベストアンサー
    • HTML
  • CSSで指定したwidthをマウスで変更したい

    frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか？ 具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } </style> </head> <body> <div id="f1">f1</div> <div id="f2">f2</div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する