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

[progate] HTML/CSS初級,progate,レビュー

三島 某

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

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

  • HTMLに触れてみよう
  • CSSに触れてみよ
  • レイアウトを作ろう
  • ヘッダーを作ろう ← 今回はここ
  • フッターを作ろう
  • コンテンツを作ろう
  • 問い合わせフォームを作ろう

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

まとめ

  • サンプルレベルでのWebページのヘッダーのコーディングを経験できる。
  • コンテンツの配置から装飾まで表示に関することはCSSにて指定する。
  • コンテンツのボックスについて知ることができる。

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

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

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

ヘッダーの構造

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

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

学習タグ/ プロパティ

div, liタグ, list-styleプロパティ

ヘッダーのレイアウト

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

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

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

学習タグ/ プロパティ

div, liタグ, left, floatプロパティ

ヘッダーの余白

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

サルワカ CSSのmarginとは?paddingとは?余白の指定方法まとめ より

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

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

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

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

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

学習タグ/ プロパティ

padding, padding-top, padding-left, padding-bottom, padding-rightプロパティ

Try it!

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

スライドTry
ヘッダーの構造
  • list-style: url('画像のURL’)を試してみましょう。

  • list-style: square insideを試してみましょう。

  • <ol>タグの場合は、どのようになるのでしょうか。

  • liのセレクタに対して、background-color: redを指定すると、どうなるでしょうか試してみましょう。

    .headerで指定した結果と違いが出る理由について考えてみましょう。
ヘッダーのレイアウト
  • <nav>タグについて調べてみましょう。

  • floatプロパティを指定した状態で、メニュー該当する値にひたすら長い文字を挿入するとどうなるでしょうか?ex.ああああああ……
ヘッダーの余白
  • paddingの値の大きい値を指定しましょう。コンテンツの大きさは何で決まるでしょうか?

  • paddingの値を0にすると、他とのコンテンツとの距離はどうなりますか?

  • paddingを指定すると、背景はどのように変わっていくでしょうか?

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

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

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

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

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

paddingについて

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

参加ランキング

PVアクセスランキング にほんブログ村