HTML/CSS：ヘッダー（header）ってなに？？｜プログラミング初心者のプロへの道

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

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

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

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

Contents

1 ヘッダーって何？？
2 ヘッダーの役割
3 ヘッダーの作り方
4 CSS
- 4.1 共有:

ヘッダーって何？？

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

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

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

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

ヘッダーの役割

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

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

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

ヘッダーの作り方

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

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

<header>
	<p>プログラミング初心者のプロへの道</p>
	<nav>
		<ul>
			<li>Swift</li>
			<li>rails</li>
			<li>漫画</li>
		</ul>
	</nav>
</header>

<p>プログラミング初心者のプロへの道</p>

<nav>

<ul>

<li>Swift</li>

<li>rails</li>

</ul>

</nav>

</header>

headerタグ

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

pタグ

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

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

navタグ

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

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

のことです。

ulタグ

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

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

liタグ

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

CSS

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

header {
	height: 100px; /*ヘッダーの高さ*/
	width: 100%; /*ヘッダーの横幅*/
	background-color: #47B39D; /*ヘッダーの背景色*/
	color: white; /*ヘッダーの文字の色*/
}

header p {
	line-height: 100px; /*行の高さ*/
	float: left; /*左に流す*/
	font-size: 30px; /*文字の大きさ*/
	margin-left: 100px; /*左にマージンを取っている*/
}

header nav {
	float: left; /*左に流す*/
	margin-left: 500px; /*左にマージンを取っている*/
}

header li {
	line-height: 100px; /*行の高さ*/
	float: left; /*左に流す*/
	margin-left: 30px; /*li間の幅を開くために左にマージンを取っている*/
	list-style: none; /*デフォルトでついているliの黒点をnoneにしている*/
}