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

2021年11月19日

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

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

コアラ

今までに学んだことを活かす時が来たね

ひつじのジョージ

忘れたところは復習して知識を定着させようね

フッターのレイアウトレッスンでは今までにヘッダーやフッターの構造レッスンで学んだことを活かしてレイアウトしていきます。

具体的には

の知識を使用します。

このレッスンでは新しく学ぶ知識はないので、復習するつもりで知識をしっかり定着させましょう。

このレッスンで必要となる学んだ知識

1 フッターのレイアウトレッスンの答え
2 このレッスンで使う過去に学んだ知識でよくあるミス
3 まとめ：学んだ知識でレイアウトしよう

フッターのレイアウトレッスンの答え

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

stylesheet.cssに以下のように記述します。

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

li {
  list-style: none;
}

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

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

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

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

.footer {
  /* background-colorを#2f5167に変更してください */
  background-color: #2f5167;
  
  /* colorを#fffにしてください */
  color: #fff;
  
  
  /* heightを120pxに変更してください */
  height: 120px;
  /* 上下左右のpaddingを40pxにしてください */
  padding: 40px;
  
}

/* footer-logoのfont-sizeとfloatを指定してください */
.footer-logo {
  font-size: 32px;
  float: left;
}

/* footer-listのfloatを指定してください */
.footer-list {
  float: right;
}

/* footer-listの中のli要素のpadding-bottomを指定してください */
.footer-list li {
  padding-bottom: 20px;
}