ブラウザ枠を超えず表示する方法

Question

CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓test.html===

=== test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？お願いします。

ORUKA1951 · Accepted Answer

＞実際はみ出ている分は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 … )］より

　初心者向けの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>

・・・・

・・・・・・

ORUKA1951 · Answer

＞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 · Answer

純粋に (x)html + CSS だけで質問者さんが要求する条件を完全に実現する方法を私は知りません。不可能だと思ってました。もしも可能なら私もその方法を知りたいです。誰か教えて！偉い人っ！！（互換モードで表示するのはなんとなく「逃げ」のような気がしますので、回答者No.1さんのやり方以外でよろしくサンキュー）で、とりあえず私はいつも JavaScript を利用しておりました。 sample

Sample

見やすいように全角スペースでインデントしてます。タブにでも変換してください。色々と首を傾げたくなる場所もありますが、とりあえず IE8 、Firefox3.6 、Opera10 、Safari4.0 で表示ができますので、細かい点は気にしない方向で。

ORUKA1951 · Answer

#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{}

einn · Answer

* {
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です。

ブラウザ枠を超えず表示する方法

＞実際はみ出ている分は22pxということではないですか？

＞marginの値が継承されないのであれば、

純粋に (x)html + CSS だけで質問者さんが要求する条件を完全に実現する方法を私は知りません。

#container {

* {

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング