プログラマーになる

プロゲートのフッターの構造レッスンの解説とよくあるミス

プロゲートのフッターの構造レッスンの解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

コアラ
このレッスンの完成はヘッダーと同じような形だね
ひつじのジョージ
ヘッダーのレッスンで学んだことを活かして作っていくよ

このレッスンではフッターの構造を作っていきます。

このレッスンで記述することはヘッダーで学んだことが活かされます。

またこのレッスンで新しく学ぶことは、入れ子になったHTMLタグを指定して装飾する方法です。

HTMLタグを細かく指定してCSSで装飾していくことで見た目がきれいなWEBページができます。

マスターすること
  • 入れ子になったHTMLタグを指定してCSSセレクタで装飾する方法

フッターの構造レッスンの答え

このレッスンの答えは以下のとおりです。

index.htmlのフッター内にロゴとリストを追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <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>

    <div class="footer">
      <!-- <div>要素を追加し、「footer-logo」というclassをつけてください -->
      <div class="footer-logo">
          Progate
      </div>
      
      <!-- <div>要素を追加し、「footer-list」というclassをつけてください -->
      <div class="footer-list">
          <ul>
            <li>会社概要</li>
            <li>採用</li>  
            <li>お問い合わせ</li>  
          </ul>
      </div>
      
    </div>
  </body>
</html>

stylesheet.htmlではリストタグへfloatとpaddingプロパティを消し、header-listクラス内のリストタグにfloatとpaddingプロパティを追加します。

body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
  /* 以下の2行を削除してください */

}

.header {
  background-color: #26d0c9;
  color: #fff;
  height: 90px;
}

.header-logo {
  float: left;
  font-size: 36px;
  padding: 20px 40px;
}

/* header-listの中のli要素にのみ適用したいCSSを記述してください */
.header-list li {
  float: left;
  padding: 33px 20px;
}

.main {
  background-color: #bdf7f1;
  height: 600px;
}

.footer {
  background-color: #ceccf3;
  height: 270px;
}

よくあるミス

入れ子になったHTMLタグを指定してCSSセレクタで装飾する時に、プロパティを入れ子にしたり、CSSが反映される順番を知らないためにミスがあります。

CSSで装飾していく上での記述方法やルールとなるのでこれらのことは必ず覚えましょう。

よくあるミス
  • CSSプロパティを入れ子にする
  • CSSが反映される順番を知らない
ひつじのジョージ
sassやscssはCSSを入れ子にして記述できるよ。

よくあるミス1：CSSを入れ子にする

/* header-listの中のli要素にのみ適用したいCSSを記述してください */
.header-list {
  li {
    float: left;
    padding: 33px 20px;
  }
}

HMTLタグでは入れ子にして記述しましたが、CSSでは入れ子にできません。

入れ子になったHTMLタグを指定するにはセレクタをスペース区切りにして指定（.header-list li {}）します。

よくあるミス2：CSSが反映する順番を知らない

.header-list li {
  float: left;
  padding: 33px 20px;
}

li {
  list-style: none;
  padding: 20px 33px;
}

CSSは上から順番に反映されます。そのため、同じHTMLタグに重複して装飾している場合は、一番最後に書いたプロパティが反映されます。

上記のCSSではheader-listクラスの中のリストタグにはpadding: 20px 33px;が反映されます。

まとめ：入れ子になったHTMLタグを指定して装飾しよう！

このレッスンではフッターの構造を作りました。

このレッスンで記述することはヘッダーで学んだことが活かされます。

またこのレッスンで新しく学びマスターすることは入れ子になったHTMLタグを指定して装飾する方法です。

HTMLタグを細かく指定してCSSで装飾していくことで見た目がきれいなWEBページができます。

マスターすること
  • 入れ子になったHTMLタグを指定してCSSセレクタで装飾する方法

入れ子になったHTMLタグを指定してCSSセレクタで装飾する時に、プロパティを入れ子にしたり、CSSが反映される順番を知らないためにミスがあります。

CSSで装飾していく上での記述方法やルールとなるのでこれらのことは必ず覚えましょう。

よくあるミス
  • CSSプロパティを入れ子にする
  • CSSが反映される順番を知らない
おすすめの記事