
こんにちは、ひつじのジョージです。
大都会でプログラマーとして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が反映される順番を知らない
まとめ:学んだ知識でレイアウトしよう
フッターのレイアウトレッスンでは今までにヘッダーやフッターの構造レッスンで学んだことを活かしてレイアウトをしました。
具体的には
の知識を使用します。
このレッスンでは新しく学ぶ知識はないので、復習するつもりで知識をしっかり定着させましょう。
また、はじめのうちはそれぞれでミスをしやすいので、これらのレッスンでご紹介した「よくあるミス」があるということも復習しておきましょう。