Technology

[HTML/CSS] .containerの役目について整理

HTMLの.containerの役目について整理する。


.containerでコンテンツの幅を調整できる

.containerをつけることで、コンテンツの横幅を調整することができる。


横幅を狭めたければ、.containerのwidthを狭める。


.containerで横幅調整をするメリットは、一括で調整できること

ウェブサイトでは、上記のようなセクションが複数重なって、ウェブサイトが出来上がる。

下は、ウェブサイトのイメージ。


実際、wrapperの部分をいじっても、横幅調整はできる。

ただ、その場合は、上の写真だったら、wrapper1, wrapper2, wrapper3で三回分調整をしないといけない。

その分containerを作れば、一回で、横幅調整がすむ。


HTMLで書くと？

下記のような構造になる。

<div class="wrapper-1">
  <div class="container"></div>
</div>
<div class="wrapper-2">
  <div class="container"></div>
</div>
<div class="wrapper-3">
   <div class="container"></div>
</div>


margin: 0 auto;でウェブサイト全体を中央揃えにする

上記の構造で、margin: 0 auto;をかけると、div要素が中央揃えになる。

全てのwrapperでcontainerを入れておけば、全てのセクションで中央揃えになる。

-Technology