[progate] HTML/CSS 初級 「ヘッダーを作ろう!」のまとめ


Webページの簡単なヘッダーを作っていきます。これまでのタグやプロパティの知識を使ってWebページのパーツの作り方を学習します。
HTML/CSS 初級の構成での「ヘッダーを作ろう!」の位置付け
- HTMLに触れてみよう
- CSSに触れてみよう
- レイアウトを作ろう
- ヘッダーを作ろう ← 今回はここ
- フッターを作ろう
- コンテンツを作ろう
- 問い合わせフォームを作ろう
HTML/CSS初級の中盤に到達しました。だんだんHTMLがそれっぽくなってきましたね。でも学習内容は薄めなんですよね・・・・
まとめ
- サンプルレベルでのWebページのヘッダーのコーディングを経験できる。
- コンテンツの配置から装飾まで表示に関することはCSSにて指定する。
- コンテンツのボックスについて知ることができる。
「ヘッダーを作ろう!」の解説
本セクションでは、Webサイトのナビゲーションを行うパーツの1つであるヘッダーについてコーディングすることで、より実践的なHTMLとCSSの連携方法を学習します。
- ヘッダーの構造
- ヘッダーのレイアウト
- ヘッダーの余白
ヘッダーの構造
bodyタグ内に記載した、ヘッダーについて学習していきます。しかしコンテンツをどのようなHTML/CSSで構築するかは都度変わってきます。
よってここではdivタグの中には、divタグを書くことで更に分割することができるんだ!を感じてください。
div, liタグ, list-styleプロパティ
ヘッダーのレイアウト
ヘッダーに記載したロゴやリストの配置をCSSで指定することを学習します。
学習者は、コンテンツの装飾だけでなく配置についてもCSSで指定することを学びます。
この辺りでそろそろ気づかれたと思いますが、WebページではCSSの理解が重要なのです。
div, liタグ, left, floatプロパティ
ヘッダーの余白
地味なタイトルですが、ここが本題です。コンテンツの余白(padding)について学習します。

上の図では、余白によってWebページ上でそのコンテンツが占める割合が決定することを説明しています。
コンテンツの余白について考える場合、以下の点ついてまずしる必要があります。
- コンテンツの高さ、幅
- 余白のサイズ ← ここだけ
- 余白の開始地点
- 余白の限界値
- 他コンテンツとの関係性
つまり、Webページはざっくり言えば、上図のような箱がたくさん組み合わさったものであると言えます。
そのことは自然とコンテンツとコンテンツの間のスペースをどうやって管理しているか、marginの存在について想像することができます。
padding, padding-top, padding-left, padding-bottom, padding-rightプロパティ
Try it!
各セクションで是非チャレンジしてみてください。セクションのボリュームが小さいのでTryが少ない・・
スライド | Try |
ヘッダーの構造 |
|
ヘッダーのレイアウト |
|
ヘッダーの余白 |
|
「ヘッダーを作ろう!」では学ばないこと
ヘッダーとは?という理解
本セクションでは、ヘッダーを作ると銘打っています。しかしヘッダーとは何か?どんな機能があるのか?についてやはり語った方がいいかなと思います。
またヘッダーの定義方法がいくつかあることも言及して欲しいところです。
少なくとも、ヘッダーを作ったという気にさせるのはアウトです・・・・
paddingについて
僕がいうのもなんなんですが、このように綺麗にまとめてくれている方がいるのでご一読を!