htmlのbodyのwidthを設定しても入れ子がそれ以上になるのはなぜ??
受付中
回答 3
投稿
- 評価 -1
- クリップ 0
- VIEW 323
bodyのwidthを1000pxに設定し、サイト全体を1000pxの幅で統一しようとしているのですが入れ子が1000px以上になります。これってなぜですか?
自分はhtmlをマトリョシカのようにイメージし勉強しているので、bodyの部分を制限すれば入れ子が全部1000pxになると思っているのですが画像などを挿入すると1000pxを突き抜けて表示されます。
https://gamewith.jp/apexlegends/
このサイトのように記事の部分の幅を統一するにはどうしたらいいですか?
-
クリップを取り消します
-
質問の評価を上げたことを取り消します
-
質問の評価を下げたことを取り消します
+3
なんでげーむうぃ…ず?
それはさておき、
bodyを箱、もしくパズルの枠だと仮定して、
その中にモノやピースをはめるとき、
モノやピースが箱やパズルの枠より大きいからといって、
勝手に縮んだりしますかね?
中に入れるものに、
中に入れるもの {
max-witdh: 箱もしくはパズルの枠px;
}
としてやれば、収まるように工夫してくれますよ。
CSSさんは賢いですから、お願いすれば聞いてくれます。
以下蛇足です。
CSSを勉強すると、
「子要素は親要素の幅の100%を取るようになる書き方」
というようなものも出てくるはずなので、
それを探してみてください。
さらに蛇足です。
マトリョーシカはだんだん小さくならないといけないはず…
なぜマトリョーシカなのか?そうか、ねたなのか。
投稿
score 380
0
こんにちは。
>サイト全体を1000pxの幅で統一しようとしているのですが入れ子が1000px以上になります。これってなぜですか?
コードをご提示するのがイヤとのことでしたので、私のエスパー能力であなたのコードを霊視してみたところ、box-sizing が初期値になっているのが原因だと霊的に感じました。
box-sizing - CSS: カスケーディングスタイルシート | MDN
box-sizing: border-box
を指定すれば問題が解決する、という予感がしましたので、ぜひお試しください。いやマジで。
補足を受けて追記
>bodyの最大幅を1000pxにして中に1000px以上の画像をいれたら突き抜けてでてきた
どうやら霊視を失敗したようです。
ご質問の現象の理由は「仕様だから」です。
In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
(略)
A block-level box is too wide for the containing block.
Visual effects
(勝手訳)いくつかのケースでは、ボックスがオーバーフロー、つまりブロックボックスが包含ブロックからはみ出します。例えば:
包含ブロックよりも幅の広いブロックレベルボックス
投稿
score 21149
0
- 「親要素から画像がはみ出しちゃう」というなら画像の最大幅を親要素の100%で設定
- 「画像入れるとなぜか親要素が膨らんじゃう」なら
box-sizing: border-box;
その辺をカバーしてるreset.cssを使えば、ザックリ解決する気はします。(霊的に)
こちらとか。
modern-css-reset
投稿
score 127
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.20%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼