HTML/CSSの勉強を始めると、
『ヘッダー』という単語が頻出します。
そこで今回は初心者の方に向けて、
ヘッダーの解説をしていきます!
ヘッダーって何??
ヘッダーとはwebサイトを構成しているパーツの名前です。
今見ていただいているこのサイトのヘッダーはこちらになります。

実際にヘッダーを見るとわかると思いますが、
ヘッダーってほとんどのサイトにありますよね!
ヘッダーの役割
ヘッダーの役割としては、
サイト名、ロゴ(このサイトにはまだありません・・・)、メニューなどを置くことにあります。
逆に考えると、サイト名、メニューなどはヘッダー部分に無いと分かりづらいサイトになってしまうのです。
ヘッダーの作り方
それでは、実際にコードを書いていきます。
HTMLのコードはこんな感じです。
<header> <p>プログラミング初心者のプロへの道</p> <nav> <ul> <li>Swift</li> <li>rails</li> <li>漫画</li> </ul> </nav> </header>
headerタグ
ヘッダー部分全体を覆うタグ。
pタグ
pタグは皆さんご存知ですよね。
今回はサイト名を入れる役割です。
メニュー部分に使用するタグ。
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