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

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

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

コアラ
今までに学んだことを活かす時が来たね
ひつじのジョージ
忘れたところは復習して知識を定着させようね

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

具体的には

の知識を使用します。

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

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

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

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;
}

このレッスンで使う過去に学んだ知識でよくあるミス

このレッスンで使う過去に学んだ知識でよくあるミスをご紹介します。

はじめのうちはそれぞれでミスをしやすいので、このレッスンでこれらのよくあるミスがあるということも復習しておきましょう。

コアラ
それぞれの知識で「よくあるミス」があるね
ひつじのジョージ
はじめのうちはミスりやすいので気をつけようね

float

CSSのfloatプロパティについては「プロゲートのヘッダーのレイアウトレッスンの解説とよくあるミス」の記事で学びました。

この記事でfloatプロパティについてよくあるミスは以下のように紹介しています。

よくあるミス
  • ulタグにfloatプロパティをあてる
  • floatプロパティの値をrightにする

padding

CSSのpaddingプロパティについては「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」の記事で学びました。

この記事でpaddingプロパティについてよくあるミスは以下のように紹介しています。

よくあるミス
  • 値をダブルクォーテーション(")で囲む
  • paddingプロパティの省略形の使い方

入れ子になったHTMLタグを指定してCSSセレクタで装飾

入れ子になったHTMLタグを指定してCSSセレクタで装飾については「プロゲートのフッターの構造レッスンの解説とよくあるミス」の記事で学びました。

この記事で「よくあるミス」は以下のように紹介しています。

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

まとめ:学んだ知識でレイアウトしよう

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

具体的には

の知識を使用します。

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

また、はじめのうちはそれぞれでミスをしやすいので、これらのレッスンでご紹介した「よくあるミス」があるということも復習しておきましょう。

おすすめの記事