class、セレクタについて

前提・実現したいこと

progateのHTML/CSS　中級　道場コースをやっている時にclass、セレクタわからないことが出てきました。

コード

HTML
1<div class="top-wrapper">
2      <div class="container">
3        <h1>LEARN TO CODE.</h1>
4        <h1>LEARN TO BE CREATIVE.</h1>
5        <p>Progateはオンラインプログラミング学習サービスです。</p>
6        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
7      </div>
8    </div>

CSS
1
2.container {
3  width: 1170px;
4  padding: 0 15px;
5  margin: 0 auto;
6}
7
8.top-wrapper {
9  padding: 180px 0 100px 0;
10  background-image: url(https://prog-8.com/images/html/advanced/top.png);
11  background-size: cover;
12  color: white;
13}

わからないこと

なぜ、h1,pのセレクタをcontainerの指定ではなくtop-wrapperの指定でCSSを編集しているのでしょうか？
そもそも、なぜcontainerとtop-wrapperの二つのクラスが必要なのでしょうか？
詳しい方ご回答よろしくお願いいたします。

think49

2019/03/16 11:24

実際に試してみてはいかがでしょう。それだけで自己解決できるように思います。

nopisu

2019/03/16 11:25

ご回答ありがとうございます。やってみて、できなくて回答をみたらこのようになっていたのですが、なぜこうではないと作用しないのか理屈がわかりません。

think49

2019/03/16 11:28

.container と .top-wrapper の大きさがなぜ違うのか分からない、ということですか。

nopisu

2019/03/16 11:34

もしかしたらそれがわからないのかもしれないのですが、自信を持ってはいとは言えないです。私のイメージでは.top-wrapperが大枠にあり、その中に.containerがあるので、.containerの中にh1やpがあるので、CSSでも同様にcontainerでh1やpの指定を行うものだと思っています。 CSSのwidth: 1170px;もcontainerではなく大枠であるtop-wrapperで指定するものだと思っているのですがそれではなぜ間違いなのでしょうか？説明下手で申し訳ありません。

think49

2019/03/16 11:55 編集

ポイントだけ回答しましたが、実際に試して「何がどう変わってしまったのか」を具体的に説明する力を身に着けるべきだと思います。そこから、「自分の仮説」と「実際の結果」の差異を明確にして、考察することが出来れば、もう一歩進んだ質問に出来ますし、自己解決できる可能性が上がります。 https://teratail.com/help/question-tips#questionTips2

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

回答3件

CSSでのレイアウト方法の選択肢は「ひとつ」とは限りません。提示のコードも複数ある選択肢の中の「ひとつ」です。

なぜ、h1,pのセレクタをcontainerの指定ではなくtop-wrapperの指定でCSSを編集しているのでしょうか？

「color: white;」の事でしょうか？一括で指定したかっただけかと思います。どちらでも良いと思います。

仮に他の要素を追加しても、同じ色で統一出来るようにしたいのかも知れません。

なぜcontainerとtop-wrapperの二つのクラスが必要なのでしょうか？

テキスト用classと、背景用classとに分けていると思います。

ディスプレイの大きさは、一般的にバラバラですが、どのサイズでも横幅一杯に表示させて、テキスト部分は、一定の幅で表示させるためと思います。

投稿2019/03/16 16:23

yoshinavi

総合スコア3523

background-image

CSSのwidth: 1170px;もcontainerではなく大枠であるtop-wrapperで指定するものだと思っているのですがそれではなぜ間違いなのでしょうか？

.top-wrapper に width: 1170px を指定すれば、background-image の幅も 1170px に変化します。

ボックスモデル

CSS
1.top-wrapper {
2  padding: 180px 0 100px 0;
3  background-image: url(https://prog-8.com/images/html/advanced/top.png);
4  background-size: cover;
5  color: white;
6}

width プロパティを指定しなかった場合の挙動は、width: autoです。
.top-wrapper には margin, border が指定されていない為、"margin edge", "border edge", "content edge" は等価です。
従って、「親要素の "padding edge"」と "content edge" が一致します。

Re: nopisu さん

投稿2019/03/16 11:44

編集2019/03/16 12:18

think49

総合スコア18162