[progate] HTML/CSS 初級 「フッターを作ろう！」のまとめ
Webページの簡単なヘッダーを作っていきます。これまでのタグやプロパティの知識を使ってWebページのパーツの作り方を学習します。
HTML/CSS 初級の構成での「フッターを作ろう！」の位置付け
- HTMLに触れてみよう
- CSSに触れてみよう
- レイアウトを作ろう
- ヘッダーを作ろう
- フッターを作ろう ← 今回はここ
- コンテンツを作ろう
- 問い合わせフォームを作ろう
目次
まとめ
- サンプルレベルでのWebページのフッターのコーディングを経験できる。
- CSSのセレクタの記載方法を増えしていきます。
「フッターを作ろう！」の解説
本セクションでは、Webサイトのナビゲーションを行うパーツの１つであるフッターについてコーディングすることで、より実践的なHTMLとCSSの連携方法を学習します。
- ヘッダーの構造
- ヘッダーのレイアウト
ヘッダーの構造
bodyタグ内に記載した、footer要素にフッターとなるタグを記載していきます。
セレクタの書き方のバリエーションが増えていきます。セレクタには以下のバリエーションがあります。
- *（すべての要素を指定）
- .class（クラス名の指定）← 今回はこれだけ
- #id（ID名の指定）
- A B（子孫セレクタの指定）← 今回はこれだけ
- A > B（子セレクタの指定）
- A + B（隣接セレクタの指定）
- A ~ B（要素の後ろにある同じ階層のセレクタの指定）
- A , B（複数のセレクタの指定）
セレクタには様々な指定方法があるのですが、今回は最もオーソドックスなものとなっています。
ちなみに以下の部分が難しかったかと思います。
- li 要素に対して指定されている以下のプロパティの指定を削除してください。
float: left;
padding: 33px 20px; - header-list の中の要素に対して以下のプロパティを貼り付けてください。
float: left;
padding: 33px 20px;
これはliにfloat: leftが指定されていると、liタグが指定されているコンテンツ全てが左寄せされます。
本件では、ヘッダーのみ左に配置したいので、「.header-list li」 とclassにheader-listを指定したものの、子要素がliのタグについてのみ左寄せを行います。
学習タグ/ プロパティ
div, liタグ, left, floatプロパティ, 子孫セレクタの指定
ヘッダーのレイアウト
ヘッダーに記載したロゴやリストの配置をCSSで指定することを学習します。合わせて、コンテンツの余白（padding）についても学習しています。
学習タグ/ プロパティ
div, liタグ, color, height, paddingプロパティ, 子孫セレクタの指定
Try it!
内容がほぼ「ヘッダーを作ろう！」と同じなのでTryも一緒ですね・・
「フッターを作ろう！」では学ばないこと
ヘッダーとは？という理解
本セクションでは、フッターを作ると銘打っています。しかしフッターとは何か？どんな機能があるのか？についてやはり語った方がいいかなと思います。
参加ランキング
