プロゲート道場初級編 footerについて

前提・実現したいこと

footerの背景色が横いっぱいに広がりません。

見本と同じように背景色を広げるにはどうすればよいでしょうか。

以下コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <!-- ここからHTMLを書き始めてください -->
    <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
    <div class="main">
      <div class="copy-container">
        <h1>HELLO WORLD<span>.</span></h1>
        <h2>プログラミングの世界へようこそ</h2>
      </div>
      <div class="contents">
        <h3 class="section-title">学べるレッスン</h3>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
          <p>HTML & CSS</p>
        </div>  
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
          <p>PHP</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
          <p>Ruby</p>
        </div>
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
          <p>Swift</p>
        </div>
      </div>
      <div class="contact-form">
        <h3 class="section-title">お問い合わせ</h3>
        <P>メールアドレス (必須)</P>
        <input>
        <P>お問い合わせ内容 (必須)</P>
        <textarea></textarea>
        <P>※必須項目は必ずご入力ください</P>
        <input class="contact-submit" type="submit" value="送信">
      </div>
      <div class="footer">
        <div class="footer-logo">Progate</div>
        <div class="footer-list">
          <ul>
            <li>会社概要</li>
            <li>採用</li>
            <li>お問い合わせ</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

よろしくお願いいたします。

Daregada

2021/01/02 06:38

おそらくHTMLファイルの構造に原因があるので、そっちを質問文に追加してください。

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

回答1件

ベストアンサー

原因は、footerクラスのdiv要素がmainクラスのdiv要素の内容に含まれているためです。

HTML
1<div class="main">
2  (略)
3  <div class="footer">
4    (略)
5  </div>
6</div>

headerクラスのdiv要素と同様に、footerクラスのdiv要素もmainクラスのdiv要素の外側に出してください。

HTML
1<div class="main">
2  (略)
3</div>
4<div class="footer">
5  (略)
6</div>

なお、HTML5ではそれぞれのグループをheader要素、footer要素として記述することをお勧めします。IE対応しなくてよければ、mainもmain要素で。

投稿2021/01/02 07:43

Daregada

総合スコア11990

NISUKE

2021/01/02 08:06

お答えいただきありがとうございます。 mainクラス、footerクラスが自分の中でごっちゃになっていて原因を見つけることができませんでした。回答ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

プロゲート道場初級編 footerについて

前提・実現したいこと

関連した質問