section ,containerなどの親要素についているwidth 100%はなぜ？

前提・実現したいこと

div要素は基本、幅いっぱいに広がるとおもいます。なのになぜわざわざ
width: 100%;
を指定するのでしょうか。

html
1<section>
2        <div class="section-inner">
3          <h2>Lorem ipsum dolor sit amet<h2>
4          <p>Lorem ipsum dolor sit amet</p>
5        </div>
6</section>

css
1section {
2  width: 100%;
3  padding: 40px 0;
4}
5.section-inner {
6  width: 70%;
7  margin: 0 auto;
8}
9

行動規範の内容に同意します

回答1件

ベストアンサー

親要素をなど周辺の構造とCSSの記述を見ないと、断言はできないです。
以下のような構造だとしたら、不要な可能性は高い気はします。

HTML
1<body>
2  <header>...</header>
3  <section>...</section>
4  <section>...</section>
5  <footer>...</footer>
6</body>

ただ例えば↓の感じだと、「横幅いっぱいにしたいからsectionにwidth: 100%;に指定しよう」という意図があったりするのかも..と思います (display: flex;で崩れるからwidthでどうにかしようという解決方法は正しくはないですが、初心者はやりがちです)。

HTML
1<div style="display: flex; flex-wrap: wrap;">
2  <section>
3    <div class="section-inner">
4      <h2>Lorem ipsum dolor sit amet<h2>
5      <p>Lorem ipsum dolor sit amet</p>
6    </div>
7  </section>
8  <section>
9    <div class="section-inner">
10      <h2>Lorem ipsum dolor sit amet<h2>
11      <p>Lorem ipsum dolor sit amet</p>
12    </div>
13  </section>
14  ...
15</div>

また、position: absolute;などをどこかで指定されている場合などはwidth: 100%;という記述をする場合もあるかもしれません。

HTML
1<div class="xxxx">
2  <section>
3    <div class="section-inner">
4      <h2>Lorem ipsum dolor sit amet<h2>
5      <p>Lorem ipsum dolor sit amet</p>
6    </div>
7  </section>
8</div>

CSS
1.xxxx {
2  position: relative;
3}
4.xxxx > * {
5  position: absolute;
6}

というように意図をいくつかは想像できたりはします。

投稿2020/03/30 22:07

new1ro

総合スコア4528

ringon

2020/03/31 02:31

「HTML+CSS標準入門」という本で <body> <header>...</header> <section>...</section> <section>...</section> <footer>...</footer> </body> これに似た形だったうえ、positionやflexなども使っていなかったので、多分不要ですよね。参考になりました！ありがとうございました。

行動規範の内容に同意します