質問: ### 前提・実現したいこと progateのHTML/CSS 中級 道場コースをやっている時にclass、セレクタわからないことが出てきました。 ### コード ``` LEARN TO CODE. LEARN TO BE CREATIVE. Progateはオンラインプログラミング学習サービスです。 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。 ``` ``` .container { width: 1170px; padding: 0 15px; margin: 0 auto; } .top-wrapper { padding: 180px 0 100px 0; background-image: url(https://prog-8.com/images/html/advanced/top.png); background-size: cover; color: white; } ``` ### わからないこと なぜ、h1,pのセレクタをcontainerの指定ではなくtop-wrapperの指定でCSSを編集しているのでしょうか? そもそも、なぜcontainerとtop-wrapperの二つのクラスが必要なのでしょうか? 詳しい方ご回答よろしくお願いいたします。
回答: ### background-image > > CSSのwidth: 1170px;もcontainerではなく大枠であるtop-wrapperで指定するものだと思っているのですがそれではなぜ間違いなのでしょうか? > > > `.top-wrapper` に `width: 1170px` を指定すれば、`background-image` の幅も 1170px に変化します。 ### ボックスモデル > > > ``` > .top-wrapper { > padding: 180px 0 100px 0; > background-image: url(https://prog-8.com/images/html/advanced/top.png); > background-size: cover; > color: white; > } > ``` > > width プロパティを指定しなかった場合の挙動は、**width: auto**です。 `.top-wrapper` には margin, border が指定されていない為、"margin edge", "border edge", "content edge" は等価です。 従って、「親要素の "padding edge"」と "content edge" が一致します。 * width - CSS: カスケーディングスタイルシート | MDN * CSS 基本ボックスモデルの紹介 - CSS: カスケーディングスタイルシート | MDN * CSS Box Model Module Level 3 (日本語訳) Re: nopisu さん