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
