このdivは必要なのでしょうか？

Question

progateのHTML&CSS学習コースで勉強しているのですが、この画像のcontainerクラスは必要なのでしょうか？
このcontainerクラスがなくてもいいような気がするのですが　どうなんでしょうか？

Answer 1

添付画像のシチュエーションだけを切り取ると、もしかしたら不要かもしれません。

.message-wrapperに背景色をつけたい + 文字がかかれたエリアの横幅や左右の余白を指定したい (統一したい)、
というようなシチュエーションで、慣例的に「.container」や「.wrap」という名前のクラスをよく使います。

使用例は、以下の参考URLを見てみてください。

参考URL:
https://codepen.io/new1ro/pen/mdJqpeQ

Answer 2

このcontainerクラスにはwidth:1170pxが指定されています。これによって、これ以上に画面を小さくしたときに、このクラスの中身が小さくならないようにしています。つまり、1170pxまではウィンドウ幅に合わせてcontainerクラスの外側に設けられたmarginを小さくしてこのdivを画面の真ん中に表示するが、それ以下になったら幅を固定して真ん中表示をやめるという役割です。実際、1170px以下にウィンドウ幅を縮めると、横スクロールができるようになります。

追記
このdivは必要です。これを設定しないとウィンドウ幅を縮めたときに以下のような表示になってしまいます。レスポンシブ対応していない、またはスマホとPCで異なるhtmlを使うサイトなどは、このようにしてウィンドウを小さくしたときにレイアウトが崩れないようにしています。

Comments

[kkst]

ありがとうございます！