HTML/CSS

HTML/CSS:ヘッダー(header)ってなに??


HTML/CSSの勉強を始めると、

『ヘッダー』という単語が頻出します。

 

そこで今回は初心者の方に向けて、

ヘッダーの解説をしていきます!

 

ヘッダーって何??

ヘッダーとはwebサイトを構成しているパーツの名前です。

今見ていただいているこのサイトのヘッダーはこちらになります。

実際にヘッダーを見るとわかると思いますが、

ヘッダーってほとんどのサイトにありますよね!

 

ヘッダーの役割

ヘッダーの役割としては、

サイト名、ロゴ(このサイトにはまだありません・・・)、メニューなどを置くことにあります。

 

逆に考えると、サイト名、メニューなどはヘッダー部分に無いと分かりづらいサイトになってしまうのです。

 

ヘッダーの作り方

それでは、実際にコードを書いていきます。

HTMLのコードはこんな感じです。

headerタグ

ヘッダー部分全体を覆うタグ。

pタグ

pタグは皆さんご存知ですよね。

今回はサイト名を入れる役割です。

navタグ

メニュー部分に使用するタグ。

navとは、navigation(ナビゲーション)

のことです。

ulタグ

liタグを使用する際に必要なタグ。

liタグをくくる役割を持っています。

liタグ

メニューの一つ一つを入れるタグ。

CSS

CSSのコードはこんな感じです。


コメントを残す

*