最近Progateで勉強し始め、「HTML & CSS 中級編」の道場コースの課題に挑戦しています。
問題自体は解決しているのですが、どうしても理解ができていないので質問させてください。
画像の「見本」のようにヘッダー部分を固定したくて、73行目に「position:fixed;」をCSSに記述しました。
実際の「プレビュー」だとヘッダーの帯が短くなってしまいました。
初心者なりに考えたのですが、78行目の「.containerクラス」に「width: 1170px;」と幅を指定しており、その状態で73行目に「position:fixed;」とだけ記述したので、恐らく画面左上を基準として固定され、ヘッダーの幅が1170pxだから帯が短くなっているように表示されているのかなと思いました。
どうしても分からなかったので「見本」の「要素の検証」を使ってソースをみたところ、cssの「position:fixed;」と記述されているクラス内に「width: 100%;」とも記載されており、なんとなくピンときたので74行目に「width: 100%;」を記述しました。
すると下記の画像のように上手くいき課題自体もクリアしたのですが、なぜヘッダーの幅を100%に固定したら上手くいったのかの仕組みが理解できません・・・これはどういった理屈で上手くいったのでしょうか?
ド素人質問で申し訳ありませんが、どうか理由を教えて下さい。
回答4件
あなたの回答
tips
プレビュー