probate HTML.CSSのclassの分け方

Question

HTML

<div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1> <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> <a href="#" class="btn signup">新規登録はこちら</a> <p>or</p> <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> </div> </div>

CSS
.top-wrapper {
padding: 180px 0 100px 0;
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
color: white;
text-align: center;
}
.container {
width: 1170px;
margin: 0 auto;
}

CSSのところで、top-wrapperとcontainerと分けて書かれていますが、HTMLの方を見るとこの２つの間には何も書かれていないので片方だけでいいのでは？と思いました。（結果は違いました）
なぜこのように分けて書くのでしょうか？何をどっちに書くのかなども教えて欲しいです。

Answer 1

.top-wrapper要素は現状width: 100%の状態ですので、width: 1170px;を書くとサイズが変わります。
横幅が設定された状態でmargin: 0 autoがつくと要素自体が中央寄せになります。

cssに下記を追加すると、それぞれの要素に枠線がつくのでレイアウトが理解しやすいかもしれません。

.top-wrapper,
.container{
	border: 4px solid red;
}

何をどちらに書くかについては、希望のレイアウトが実現できれば、自由ですし、こうするべきという答えは無いと思います。もし意識するとしたら保守性でしょうか、レイアウトが変わったり、マウスオーバーで変化をつけるなどを想定して、こう分けといた方が良いかと考えながらコーディングすることはあります。

また、質問にコードを載せる際は<code>機能を使用するようにしましょう。

Comments

[sawayakaunagi]

borderを使うことによってどこの範囲が指定されている範囲なのかは理解できました。
しかし、なぜ２つのclassを使うだけで指定される範囲が変わるのでしょうか？
classの名前は決まっているのを使うことが多いですが、classの名前は関係ないですよね？
それとcode機能のご指摘ありがとうございます。次からは使うようにします。

[webgoto]

>>なぜ２つのclassを使うだけで指定される範囲が変わるのでしょうか？
そのままの感じもするのですが、別々のクラス名を2つの要素につけたので、装飾できる箇所も2箇所になっているという感じでしょうか。

>>classの名前は決まっているのを使うことが多いですが、classの名前は関係ないですよね？
関係ないですね。自分でcssを書く分にはclass名は何でもよく、btnと名付けたからといってボタンの見た目になるわけではないです。

[sawayakaunagi]

理解できました。ありがとうございます。