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

2021年9月28日[progate] HTML/CSS初級,progate,レビュー

Webページの簡単なヘッダーを作っていきます。これまでのタグやプロパティの知識を使ってWebページのパーツの作り方を学習します。

HTML/CSS 初級の構成での「ヘッダーを作ろう！」の位置付け

HTML/CSS初級の中盤に到達しました。だんだんHTMLがそれっぽくなってきましたね。でも学習内容は薄めなんですよね・・・・

まとめ

「ヘッダーを作ろう！」の解説

本セクションでは、Webサイトのナビゲーションを行うパーツの１つであるヘッダーについてコーディングすることで、より実践的なHTMLとCSSの連携方法を学習します。

1. ヘッダーの構造
2. ヘッダーのレイアウト
3. ヘッダーの余白

ヘッダーの構造

bodyタグ内に記載した、ヘッダーについて学習していきます。しかしコンテンツをどのようなHTML/CSSで構築するかは都度変わってきます。

よってここではdivタグの中には、divタグを書くことで更に分割することができるんだ！を感じてください。

ヘッダーのレイアウト

ヘッダーに記載したロゴやリストの配置をCSSで指定することを学習します。

学習者は、コンテンツの装飾だけでなく配置についてもCSSで指定することを学びます。

この辺りでそろそろ気づかれたと思いますが、WebページではCSSの理解が重要なのです。

ヘッダーの余白

地味なタイトルですが、ここが本題です。コンテンツの余白（padding）について学習します。

上の図では、余白によってWebページ上でそのコンテンツが占める割合が決定することを説明しています。

コンテンツの余白について考える場合、以下の点ついてまずしる必要があります。

• コンテンツの高さ、幅
• 余白のサイズ　← ここだけ
• 余白の開始地点
• 余白の限界値
• 他コンテンツとの関係性

つまり、Webページはざっくり言えば、上図のような箱がたくさん組み合わさったものであると言えます。

そのことは自然とコンテンツとコンテンツの間のスペースをどうやって管理しているか、marginの存在について想像することができます。

Try it!

各セクションで是非チャレンジしてみてください。セクションのボリュームが小さいのでTryが少ない・・

「ヘッダーを作ろう！」では学ばないこと

ヘッダーとは？という理解

本セクションでは、ヘッダーを作ると銘打っています。しかしヘッダーとは何か？どんな機能があるのか？についてやはり語った方がいいかなと思います。

またヘッダーの定義方法がいくつかあることも言及して欲しいところです。

少なくとも、ヘッダーを作ったという気にさせるのはアウトです・・・・

paddingについて

僕がいうのもなんなんですが、このように綺麗にまとめてくれている方がいるのでご一読を！

CSSのmarginとは？paddingとは？余白の指定方法まとめ

分かりづらいmarginとpaddingの意味や使い方について初心者の方でも分かるように図と例をたくさん用いて解説します。

参加ランキング