Q&A
自身で検証したコードとその結果（実測値が分かる情報）をご提示ください。
文章説明よりエビデンスを。
bodyのwidthを1000pxに設定し、サイト全体を1000pxの幅で統一しようとしているのですが入れ子が1000px以上になります。これってなぜですか？
自分はhtmlをマトリョシカのようにイメージし勉強しているので、bodyの部分を制限すれば入れ子が全部1000pxになると思っているのですが画像などを挿入すると1000pxを突き抜けて表示されます。
https://gamewith.jp/apexlegends/
このサイトのように記事の部分の幅を統一するにはどうしたらいいですか？
今回の質問にコードは必要ないかと思います。この文章を読んで内容が理解できなかったですかね？
どのようなコードで検証したのかわかる人はどこにもいないでしょうね。
入れ子とは何を指しているのか、なぜ1000pxを超えているのか、どうやって直すのか、はコードを見ないと助言できません。
直し方とかじゃなくてbodyの幅が1000pxなら入れ子も1000pxになるのが必然だと思っていたので助言が惜しかっただけです。コードは特にありません
そう思ったのならなぜ先に自分で実行してみなかったのだろう･･･。
調べたり質問書くより早いと思ったが
？？ 実行してダメだったから質問しただけです。bodyの最大幅を1000pxにして中に1000px以上の画像をいれたら突き抜けてでてきたので質問したまでです。
初めからそう書いておけば話が早かったのに……
はじめから情報をきちんと出さないと、当てはまらない回答を書いてしまった回答者の時間が無駄になってしまうのです。
最初にm.ts10806さんが
＞自身で検証したコードとその結果（実測値が分かる情報）をご提示ください。
と言われてるんだからその時点でその実行したコードを追記すれば良かったのでは？
回答3件
0
なんでげーむうぃ…ず？
それはさておき、
bodyを箱、もしくパズルの枠だと仮定して、
その中にモノやピースをはめるとき、
モノやピースが箱やパズルの枠より大きいからといって、
勝手に縮んだりしますかね？
中に入れるものに、
css
1中に入れるもの { 2 max-witdh: 箱もしくはパズルの枠px; 3}
としてやれば、収まるように工夫してくれますよ。
CSSさんは賢いですから、お願いすれば聞いてくれます。
以下蛇足です。
CSSを勉強すると、
「子要素は親要素の幅の100％を取るようになる書き方」
というようなものも出てくるはずなので、
それを探してみてください。
さらに蛇足です。
マトリョーシカはだんだん小さくならないといけないはず…
なぜマトリョーシカなのか？そうか、ねたなのか。
投稿2021/03/04 01:41
退会済みユーザー
総合スコア0
なんでエンジニアの人って無知な人をすぐ煽るんですかね。マトリョシカというのは学習サイトにて教えてもらったものです。
煽ってないぞー
君の気のせいだっ
それよりもその面白そうな学習サイトを教えてくれ！
気が向いたらでいいからさ
なんで、マトリョーシカに例えたのかめっちゃ気になるんだ
どう考えても煽ってるだろ。 エンジニア界隈(web業界含む)はやったら初心者を笑う傾向にありますね。
学習サイトはプロゲートだよ。web開発パスを進めていけばどっかで出会うよ。とりあえずそのあおり区長ダサすぎるんでやめたほうがいいですよ。あと間違ってベスアにしちゃったけど君の回答間違ってるわｗ
すごいな。こんなにいきっておきながら。いってること間違ってるっていう。上のborder関係で解決したわ。いきるのももうちょっとレベル上げてからのほうがいいとおもうゾっ
横からすみません。
この回答は間違っていないと思います。
補足欄に「bodyの最大幅を1000pxにして中に1000px以上の画像をいれた」とありますが、その場合、本質的にはボーダーをいじっても解決しないはずです。原因としては、この回答の通り、小さい入れ物に大きなものを入れるとあふれる、です。
おそらく、ボーダーと一緒にいじった何かが原因で解決したのだと思います。
>lionacneko様
プロゲートですかっ、ありがとうございます！
Web開発パス見つけましたっ
Webアプリを作りたくなったら使ってみることにします！
間違った回答をしてしまったようで大変申し訳ございませんっ
lionacneko様のご活躍を心よりお祈り申し上げます
サブ垢作ったみたいなので、ここはもう読まないと思いますから、お詫びは届かないと思います。
ちゃんと、ツイッターでおわびしないと。
https://twitter.com/lionac8/status/1367131360553443331
>Lhankor_Mhy様
横からでも縦からでも斜めからでも大丈夫です！なんら問題ございませんっ
border関係で解決されたそうなので、恐らく画期的な何が舞い降りてきたのでしょう。
box-sizing:border-box;にせずにborderを設定していたとかそんな感じなのかなと思いました。
まぁなんにせよ、自己解決されたようなのでもういいかなと。
回答へのご支持ありがとうございました！
＞エンジニア界隈(web業界含む)はやったら初心者を笑う傾向にありますね。
だったら笑ってる人達を見返せるぐらいのレベルまで成長してやろうという気にはならないのかなぁ･･･と
思った。
すいません、完全に独り言です
>Lhankor_Mhy様
おっと、行き違いです、すみません。
アカウント変更されてしまったのですね。もったいない。
Twitterのリンクありがとうございます、助かりますっ
ですが、彼は誇り高き漢の中の漢だと思われるので、
小生のような矮小な存在の謝罪など必要とされないでしょう。
何から何までありがとうございました！
ちょっと追撃して参ります。
ではではっ
>K_3578様
笑ってないんですけどねぇ、マトリョーシカに『なぜそれ選んだんだ？？？』と思っただけで。
大丈夫、親は無くとも子は育つと申します。
誰かに教えを乞わなくてもきっと彼は立派に成長することでしょう。
かなり反骨精神がありそうでしたから…将来はgeekですよ、きっと。
独りごとです。アンカーは気のせいです、たぶん。
>amiya-seさん
うぉ、自分の独り言に返信貰ってすいません。
あ、自分も別にamiya-seさんがそう思ったとして書いた訳では無く、
彼の中でそういうイメージが見えてるならそれこそ反骨精神になりそうだなーと。
自分も「マトリョーシカ」はよくわかんなかったので興味ついでにプロゲート見てみます。
>K_3578様
マトリョーシカって外側を取ると、内側に何かあって、それ取ってもまだ何かが…と続くので、
html>body>main>section>article>ul>li>a>p>span>img
このように大きな要素の中に一回り小さな要素があってー…みたいな話かと。
CSSでセレクタ追ってく時とか、スクレイピングで要素をXPath？で指定することをイメージしていたのかもしれません。※実際は逆に辿ってるとかなんとか。
あとは説明図に表すときに内側の要素を外側より小さく描いていきますからその辺りも関係してるかと思われます。
ただ、言いたいことはわかるのだけど、マトリョーシカだと厚みがあるし、基本的に１つずつしか扱えないはずなので、弁当箱とかダンボール箱とか、冷蔵庫とか、パズルとか、タンスとか、押し入れ…etc
いろいろあるなかでなぜマトリョーシカにしたんだ？という素朴な疑問ですね。
たぶん、記事を書いた人がオリジナリティを出したかったか、パクられたら分かるように仕込んだか、マトリョーシカ好きのどれかだとは思うのですが。
※双子や三つ子のマトリョーシカがあるかどうかは存じません。
と、まぁここまで独り言です。
って、お互いに何をやってるのかよくわからないですが…ｗ
特にお気になさらないで下さい。
落ち着いてるときに自分も見てみます。教材見れば納得できるかもしれないし。
なんかあることないこと言ってて草 サブ垢なんて作ってないんですが、、、この質問サイトは質問をするとさらされるんですね！了解です！
そうなんですね。
ツイ垢で「いくつか質問した」とあるところ、一つしか質問してなかったのでサブ垢なのかと思いました。
勘違い失礼しました。
0
- 「親要素から画像がはみ出しちゃう」というなら画像の最大幅を親要素の100％で設定
- 「画像入れるとなぜか親要素が膨らんじゃう」なら
box-sizing: border-box;
その辺をカバーしてるreset.cssを使えば、ザックリ解決する気はします。（霊的に）
こちらとか。
modern-css-reset
投稿2021/03/04 02:47
総合スコア272
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
（勝手訳）いくつかのケースでは、ボックスがオーバーフロー、つまりブロックボックスが包含ブロックからはみ出します。例えば：
__ 包含ブロックよりも幅の広いブロックレベルボックス__
投稿2021/03/04 02:07
編集2021/03/04 04:50総合スコア37207
あなたの回答
tips
プレビュー
