footerのbackgroundc-colorが反映されない

初めてこちらで質問させて頂きます。

ｈｔｍｌとCSSを勉強中で、簡易サイトを作っています。
footerの部分のbackground-colorが反映されません。
他の部分のCSSはきちんと反映されていますが、footer部分のみがうまくいきません。

色んな方法を試し検索しましたが解決できず、質問させて頂きました。
footer部分のどこがおかしいのか教えて頂きたいです。

よろしくお願いします。

ーーーーーーHTML↓↓↓↓ーーーーーーーーーー

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="旅行サイト" />
  <meta name=”keywords” content=”旅行”>
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style type="text/css">
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 0;
      margin-bottom: 0
    }

    p {
      margin-top: 0;
      margin-bottom: 0
    }
  </style>
</head>

<body>
  <!-- ＝＝＝＝＝ヘッダー＝＝＝＝＝＝ -->
  <header id="header" class="wrapper">
    <h1><a href="#"><img src="logo (1).svg" alt="ロゴ"></a></h1>
    <nav>
      <ul>
        <li><a href="#">New</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Q&A</a></li>
        <li><a href="#">Colum</a></li>
      </ul>
    </nav>
  </header>

  <!-- ＝＝＝＝＝＝＝ピックアップ＝＝＝＝＝＝＝＝ -->
  <div id="pickup" class="wrapper">
    <article>
      <img src="pickup1.jpeg" alt="旅行">
      <h2>タイトルタイトル</h2>
      <a href="#">READMORE</a>
    </article>
    <article>
      <img src="pickup2.jpeg" alt="旅行">
      <h2>タイトルタイトル</h2>
      <a href="#">READMORE</a>
    </article>
    <article>
      <img src="pickup1.jpeg" alt="旅行">
      <h2>タイトルタイトル</h2>
      <a href="#">READMORE</a>
    </article>
  </div>

  <!-- ＝＝＝＝＝＝コンテナー＝＝＝＝＝＝＝＝ -->
  <div id="container" class="wrapper">

    <!-- ＝＝＝＝＝＝メイン（左側）＝＝＝＝＝＝＝ -->
    <main>
      <article>
        <h2>タイトルタイトル</h2>
        <img src="main1.jpeg" alt="旅行">
        <p>本文テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </article>
      <article>
        <h2>タイトルタイトル</h2>
        <img src="main1.jpeg" alt="旅行">
        <p>本文テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </article>
      <article>
        <h2>タイトルタイトル</h2>
        <img src="main1.jpeg" alt="旅行">
        <p>本文テキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </article>
    </main>

    <!-- ＝＝＝＝＝アサイド（右側）＝＝＝＝＝＝＝ -->
    <aside>
      <!-- ＝＝＝自己紹介＝＝＝ -->
      <section id="icon">
        <img src="icon.jpeg" alt="アイコン">
        <h3>yui kawakami</h3>
        <p>テキストテキストテキストテキストテキストテキストテキスト</p>
      </section>

      <!-- ＝＝＝ランキング＝＝＝ -->
      <section id="ranking">
        <h3>Ranking</h3>
        <article>
          <img src="ranking3.jpeg" alt="">
          <h4>テキストテキストテキスト</h4>
        </article>
        <article>
          <img src="ranking3.jpeg" alt="">
          <h4>テキストテキストテキスト</h4>
        </article>
        <article>
          <img src="ranking3.jpeg" alt="">
          <h4>テキストテキストテキスト</h4>
        </article>
        <article>
          <img src="ranking3.jpeg" alt="">
          <h4>テキストテキストテキスト</h4>
        </article>
        <article>
          <img src="ranking3.jpeg" alt="">
          <h4>テキストテキストテキスト</h4>
        </article>
      </section>
    </aside>
  </div>

  <footer id="footer">
    <div class="footer_content">
      <section id="about" class="items">
        <h4>About</h4>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a href="#">プロフィール詳細</a>
        <a href="#">お仕事の依頼</a>
        <a href="#">お問い合わせ</a>
      </section>
      <section id="menu" class="items">
        <h4>Menu</h4>
        <ul>
          <li>NEW</li>
          <li>CATEGORY</li>
          <li>COLUMN</li>
          <li>Q&A</li>
        </ul>
      </section>
      <section id="twitter" class="items">
        <h4>Twitter</h4>
      </section>
    </div>
  </footer>
</body>

</html>

ーーーーーーーーーCSS↓↓↓↓ーーーーーーーーーー

@charset "UTF-8";

/* 全体設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
html {
  font-size: 100%;
}

body {
  color: #24292e;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #24292e;
}

img {
  max-width: 100%;
}

li {
  list-style: none;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}


/* ーーーーーーーーーーーーーー
ヘッダー
ーーーーーーーーーーーーーーー */
#header h1 {
  width: 150px;
  padding-top: 30px;
  padding-left: 50px;
}

#header ul {
  display: flex;
  background-color: #24292e;
  color: #fff;
  padding: 8px;
}

#header li {
  font-size: 13px;
  padding: 0 30px;
}

#header li a {
  color: #fff;
}

#header li a:hover {
  opacity: 0.7;
}

/* ーーーーーーーーーーーーーーー
ピックアップ
ーーーーーーーーーーーーーーーー */
#pickup {
  text-align: center;
  margin: 0 20px;
}

#pickup article {
  width: 30%;
  display: inline-block;
  margin: 10px;
}

#pickup img {
  vertical-align: bottom;
}

#pickup h2 {
  font-size: 20px;

}

#pickup a {
  font-size: 12px;
}

/* ーーーーーーーーーーー
コンテナー範囲ここから
↓↓↓↓ーーーーーーーーーー */
#container {
  margin-top: 50px;
}


/* ーーーーーーーーーーーーーーー
メイン（左側）
ーーーーーーーーーーーーーーー */
main {
  float: left;
  width: 60%;
  padding: 0 5%;
  text-align: center;
}

main article {
  margin-bottom: 50px;
}

main h2 {
  margin-bottom: 10px;
}

/* ーーーーーーーーーーーーーーー
アサイド（右側） 
ーーーーーーーーーーーーーーーー*/
aside {
  float: right;
  width: 25%;
  padding-right: 5%;
  text-align: center;
}

/* 自己紹介部分 */
#icon {}

#icon img {
  border-radius: 50%;
  width: 120px;
}

#icon h3 {
  font-size: 15px;
  margin-top: 20px;
}

#icon p {
  font-size: 13px;
  margin: 30px auto;
}



/* ランキング */
#ranking {
  margin-top: 70px;
}

#ranking article {
  margin: 50px 0;
}

#ranking h4 {
  font-weight: normal;
  font-size: 13px;
  margin: 15px;
}


/* ーーーーーーーーーーー
フッター
ーーーーーーーーーーー */


/* わからないこと
背景色が反映されない*/

footer{
　　background-color:blue;
}

#footer h4{
  margin-bottom: 30px;
}
#about{
  width: 30%;
  float: left;
  margin-left: 30px;
}
#menu{
  width: 30%;
  float: left;
  margin-left: 30px;
}
#menu li{
  padding: 10px 0;
  border-bottom: 1px solid slategray;
}
#twitter{
  width: 30%;
  float: right;
}

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

回答2件

CSS
1footer{
2　　background-color:blue;
3}

全角スペースがあるため正常に解釈されていません。

さらに、

CSS
1#twitter{
2  width: 30%;
3  float: right;
4}

float: right;が原因でレイアウトがおかしくなっているようです。

投稿2021/09/12 09:43

itagagaki

総合スコア8402

ベストアンサー

まずは全角スペース

css
1[　][　]background-color:blue;

何を使ってコードを書いているか分かりませんが、
構文チェック機能があるものを利用したほうが良いです。
Web上のサービスもあります。

あとfloatは回り込みだけではなく、指定した要素を浮かせる役割があるようです。
※「float background-color」で調べるとそれなりに出てきます。

MDNにも書かれています。

left

要素は、必ずその包含ブロックの左側に浮動します。

right
要素は、必ずその包含ブロックの右側に浮動します。

親要素の諸々指定は必要ですが、回り込み解除は必ずしてください。

例：
css

css
1.clear{
2  clear:both;
3}

html

html
1      <section id="twitter" class="items">
2        <h4>Twitter</h4>
3      </section>
4      <div class="clear"></div>

投稿2021/09/12 09:52

編集2021/09/12 10:00

m.ts10806

総合スコア80875

m1nu

2021/09/12 10:08

float backgroundcolorと検索すると、知りたかったことがたくさん出てきました。助かりました、ありがとうございました。

m.ts10806

2021/09/12 10:53

提示したようなMDNのリファレンスも確認するようにしてください。機能仕様です。

m1nu

2021/09/12 13:17

あの後読ませて頂きました。理解が深まりました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

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

footerのbackgroundc-colorが反映されない

関連した質問