HTML/CSS

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


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

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

 

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

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

 

ヘッダーって何??

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

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

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

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

 

ヘッダーの役割

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

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

 

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

 

ヘッダーの作り方

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

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

<header>
	<p>プログラミング初心者のプロへの道</p>
	<nav>
		<ul>
			<li>Swift</li>
			<li>rails</li>
			<li>漫画</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にしている*/
}


ABOUT ME
ささお
3年目iOSエンジニア。 スタートアップで働いておりやす。 プログラミングスクールとエンジニアのキャリアを考えたい。 作ったアプリ - https://apps.apple.com/us/app/loverprofile/id1463563845?l=ja&ls=1