- ベストアンサー
ブラウザ枠を超えず表示する方法
- CSSとHTMLを使用して、ブラウザ枠を超えずに要素を表示する方法について質問があります。
- 現在の設定では、要素のボーダーラインがブラウザ枠を突っ切って表示されてしまっています。
- スクロールなしで要素のボーダーを確認する方法についても知りたいです。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞実際はみ出ている分は22pxということではないですか？ 確かにそうですね。一方しか足してなかった。 ＞blockquoteのようなブロック要素にもmargin:0px等が継承により影響するような気もしますけど、 プロパティ一つ一つに、継承(Inherited)が決められています。とはいってもいちいち仕様書を見なくても、常識的な判断で間違いないです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' Value: <margin-width> | inherit Initial: 0 初期値 Applies to: all elements 適用 Inherited: no 継承 Percentages: refer to width of containing block 参照 Media: visual ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#margin-properties )］より 初心者向けのCSSの説明サイトは、それぞれのプロパティについてとか、CSSでここまでできるというものが多くて、あまり実用的とは言えないものが多いです。 たとえば、あなたの示されたHTMLが、下記であっても CSSは html, body { padding:0px; margin:0px; width: 100%; background-color:gray; } body>div{ width:80%; min-width:540px; max-width:800px; margin-right:auto; margin-left:auto; background-color:white; } で、通常はウィンドウの80%、幅広ディスプレイだと800pxより広くならず;幅の狭い端末でも540pxより狭くならず、かつ中央に配置される。 特にCSSのためだけに、idは指定していませんし、ややこしくするだけで指定する必要はないです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="top"> <h1>・・・・</h1> <p>・・・・・・</p> <ul class="nav"> <li><a href=""></a></li> <li><a href=""></a></li> <ul> </div> </body> </html>
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞marginの値が継承されないのであれば、 ＞* { ＞margin: 0px; ＞} ＞とやっても、blockquoteのようなブロック要素には影響ないような気がしますが、 ＞私の・・・解釈違ってますか？ はい、*はCSS2から導入された全称セレクタで、すべての要素に対する指定です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 全称セレクタ（universal selector）はアスタリスクで示され、あらゆる要素名とマッチする。 すなわち、木構造内の全要素とマッチする。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector )］より 継承というのは、祖先要素で指定されたプロパティが子孫の要素に継承されるということです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 継承性（Inherited） 祖先要素からの値継承の有無。 指定値、継承値、初期値の相互関係については[6 カスケード処理( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )]を参照のこと。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［仕様について( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/about.html#q9 )］より継承性（Inherited） 自分の作成しているHTMLの文書構造の木構造がきちんと頭に入っていると、深く考えなくても常識的判断でよいです。 font-familyは、親要素で指定されれば継承されるはずですし、borderなどは継承されてはおかしいですね。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
純粋に (x)html + CSS だけで質問者さんが要求する条件を完全に実現する方法を私は知りません。不可能だと思ってました。もしも可能なら私もその方法を知りたいです。誰か教えて！偉い人っ！！ （互換モードで表示するのはなんとなく「逃げ」のような気がしますので、回答者No.1さんのやり方以外でよろしくサンキュー） で、とりあえず私はいつも JavaScript を利用しておりました。 <!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> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>sample</title> <style type="text/css"> html, body { width: 100%; height: 95%; padding: 0px; margin: 0px; } #container { height: 100%; margin: 10px; border: 1px solid #b3b3b3; } </style> <script type="text/javascript"> //<![CDATA[ function reSize(id) { var isMSIE = /*@cc_on!@*/false; if (isMSIE) { myHeightIe = document.documentElement.clientHeight - 22 + 'px' document.getElementById(id).style.height=myHeightIe; } else { myHeight = innerHeight - 22 + 'px' document.getElementById(id).style.height=myHeight; } } //]]> </script> </head> <body onLoad="reSize('container');" onResize="reSize('container');"> <div id="container"> Sample </div> </body> </html> 見やすいように全角スペースでインデントしてます。タブにでも変換してください。 色々と首を傾げたくなる場所もありますが、とりあえず IE8 、Firefox3.6 、Opera10 、Safari4.0 で表示ができますので、細かい点は気にしない方向で。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
#container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } 8.1 ボックスの寸法 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions )より、widthは、それが含まれる親コンテナブロックの内寸法が基準ですから、ウィンドウが800pxだとしたら、800px幅になります。そのうえで、margin: 10px;、border-width:1pxが設定してあるため、右に11pxはみ出す・・そのように指定してあるからそのように表示される。 なお、全称セレクタで * { padding: 0px; margin: 0px; } は感心しません。blockquoteやul,ol,pなどすべての要素に適用されるため、スタイルシートですべて上書きしなければならず、スタイルシートがとても煩雑になってしまいます。 html, body { padding:0px; margin:0px; width: 100%; } でよいです。height:100%もつかわないほうがよい。ユーザーエージェントには、携帯端末もプリンターもある。縦横とも全くスクロールするはずのない情報量の少ないトップページなどに限定したほうがよいです。 CSSのためだけに、#containerは？ div#top{} とか・・ あるいは、body>div{}
お礼
ご返信ありがとうございます。 はみ出る理由がよく分かりました。よくよく考えるとmargin はborderの外に取られるので当然はみでますね；ブラウザの左部分を見ると、borderがブラウザ枠より内側に表示されていたので、右側も内側に表示されるのでは・・とすごい勘違いしていたようです。 そこで、一つ確認させてください。右に11pxはみ出ているということですが、右左のmargin＋border分合わせて、実際はみ出ている分は22pxということではないですか？ あと、追記で書かれた件ですが、 html, body { padding:0px; margin:0px; width: 100%; } と書くことで、blockquoteのようなブロック要素にもmargin:0px等が継承により影響するような気もしますけど、違うのでしょうか？
- einn
- ベストアンサー率37% (671/1802)
* { padding: 0px; margin: 0px; } html, body { margin: 10px; } #container { width: 100%; height: 100%; border: 1px solid #b3b3b3; } 用意されたHTMLで、divを均等に上下左右10px開けるには、以上でよろしいですよ。お試しください。 bodyとcontainerが両方100%になっていたのが原因です。テーブルでもありがちですね。 bodyで横幅縦幅がともに100％だったのを、上下左右マージン10pxにしました。 そして、containerを横縦100%した、と。これでブラウザを縮小してもはみ出ないです。 ちなみに検証環境はIE7です。
お礼
ご返信ありがとうございます。 たしかに・・理想な形になってます。ただ、bodyに対するmargin:10pxが、なぜにブラウザの内側に10pxのmarginが取られるかその根拠が分かりません。回答番号NO2さんの回答とは矛盾しているような・・。 そもそも、bodyにwidthを指定していないので、おそらくbodyの幅はブラウザ表示幅全体になると思います。となると、結局bodyにwidth:100%してmargin:10pxすると同じことで、理論上、ブラウザ枠をborderがはみ出してスクロールバーが出てしまいますよね？ よろしければご説明お願いします。
お礼
ご返信ありがとうございます。 marginの値が継承されないのであれば、 * { margin: 0px; } とやっても、blockquoteのようなブロック要素には影響ないような気がしますが、私の・・・解釈違ってますか？ あと、min-width、max-widthは大変参考になりました。でも、この属性、IE6ではきかないのですね＾＾