質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.20%

htmlのbodyのwidthを設定しても入れ子がそれ以上になるのはなぜ??

受付中

回答 3

投稿

  • 評価 -1
  • クリップ 0
  • VIEW 323

nekoneko120

score 1

bodyのwidthを1000pxに設定し、サイト全体を1000pxの幅で統一しようとしているのですが入れ子が1000px以上になります。これってなぜですか?
自分はhtmlをマトリョシカのようにイメージし勉強しているので、bodyの部分を制限すれば入れ子が全部1000pxになると思っているのですが画像などを挿入すると1000pxを突き抜けて表示されます。

https://gamewith.jp/apexlegends/

このサイトのように記事の部分の幅を統一するにはどうしたらいいですか?

  • クリップを取り消します

  • 質問の評価を上げたことを取り消します

  • 質問の評価を下げたことを取り消します

質問への追記・修正、ベストアンサー選択の依頼

回答 3

+3

なんでげーむうぃ…ず?

それはさておき、
bodyを箱、もしくパズルの枠だと仮定して、
その中にモノやピースをはめるとき、
モノやピースが箱やパズルの枠より大きいからといって、
勝手に縮んだりしますかね?

中に入れるものに、

中に入れるもの {
  max-witdh: 箱もしくはパズルの枠px;
}


としてやれば、収まるように工夫してくれますよ。
CSSさんは賢いですから、お願いすれば聞いてくれます。

以下蛇足です。
CSSを勉強すると、
「子要素は親要素の幅の100%を取るようになる書き方」
というようなものも出てくるはずなので、
それを探してみてください。

さらに蛇足です。
マトリョーシカはだんだん小さくならないといけないはず…
なぜマトリョーシカなのか?そうか、ねたなのか。

投稿

amiya-se

score 380

  • K_3578

    K_3578

    2021/03/05 18:09

    >amiya-seさん
    うぉ、自分の独り言に返信貰ってすいません。
    あ、自分も別にamiya-seさんがそう思ったとして書いた訳では無く、
    彼の中でそういうイメージが見えてるならそれこそ反骨精神になりそうだなーと。
    自分も「マトリョーシカ」はよくわかんなかったので興味ついでにプロゲート見てみます。
  • amiya-se

    amiya-se

    2021/03/05 18:45

    >K_3578様
    マトリョーシカって外側を取ると、内側に何かあって、それ取ってもまだ何かが…と続くので、
    html>body>main>section>article>ul>li>a>p>span>img
    このように大きな要素の中に一回り小さな要素があってー…みたいな話かと。
    CSSでセレクタ追ってく時とか、スクレイピングで要素をXPath?で指定することをイメージしていたのかもしれません。※実際は逆に辿ってるとかなんとか。
    あとは説明図に表すときに内側の要素を外側より小さく描いていきますからその辺りも関係してるかと思われます。

    ただ、言いたいことはわかるのだけど、マトリョーシカだと厚みがあるし、基本的に1つずつしか扱えないはずなので、弁当箱とかダンボール箱とか、冷蔵庫とか、パズルとか、タンスとか、押し入れ…etc
    いろいろあるなかでなぜマトリョーシカにしたんだ?という素朴な疑問ですね。
    たぶん、記事を書いた人がオリジナリティを出したかったか、パクられたら分かるように仕込んだか、マトリョーシカ好きのどれかだとは思うのですが。
    ※双子や三つ子のマトリョーシカがあるかどうかは存じません。

    と、まぁここまで独り言です。
    って、お互いに何をやってるのかよくわからないですが…w

    特にお気になさらないで下さい。
    落ち着いてるときに自分も見てみます。教材見れば納得できるかもしれないし。
  • nekoneko120

    nekoneko120

    2021/03/05 23:38

    なんかあることないこと言ってて草 サブ垢なんて作ってないんですが、、、この質問サイトは質問をするとさらされるんですね!了解です!

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

(勝手訳)いくつかのケースでは、ボックスがオーバーフロー、つまりブロックボックスが包含ブロックからはみ出します。例えば:
  包含ブロックよりも幅の広いブロックレベルボックス

投稿

編集

Lhankor_Mhy

score 21149

0

  • 「親要素から画像がはみ出しちゃう」というなら画像の最大幅を親要素の100%で設定
  • 「画像入れるとなぜか親要素が膨らんじゃう」ならbox-sizing: border-box;

その辺をカバーしてるreset.cssを使えば、ザックリ解決する気はします。(霊的に)
こちらとか。
modern-css-reset

投稿

mai1210

score 127

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る