【HTML&CSS】ヘッダーの作り方！

どうも皆さんこんにちは！kwです！

今回は、ヘッダーの作り方をご紹介します。

Webサイトを開いたら一番最初に見えると言っても過言ではないヘッダーですが、ヘッダーがうまく作れるのと作れないのではサイトの印象が大きく変わってしまいます。

そんなヘッダーの基本的な作り方を今回はご紹介していきます！

1.ヘッダーの作り方

ヘッダーを作るには<header>タグを使います。

ヘッダーに入れたい要素を<header>タグで囲ってあげます。

（今回は見た目重視ではなく、ヘッダーの作り方を紹介しますが、後にヘッダーのデザインを紹介するつもりです。）

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

今回はヘッダーの部分がわかりやすくするために背景を黒くしてみました。

width:100%;というふうに記述していますが、これは横幅を全て埋めるという指示です。

また、height:100px;としていますが、これはヘッダーの高さを100pxにするという指示です。

また、headerは<div>タグで作ることも可能です↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

ただ、基本的には<header>タグで作るので、あまり覚えなくてもいいですが、万が一の時のために覚えておいてください（笑）。

2.まとめ

いかがでしたでしょうか？

前述でも述べたとおり、後ほどヘッダーのデザインの紹介もするつもりなので、デザインについて興味がある方は少しお待ちいただけると幸いです。

今回も、最後まで見てくれた方、ありがとうございました。

ぜひ、お手隙の際に他の記事もご覧ください！

また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。