HTML/CSSの勉強を始めると、
『ヘッダー』という単語が頻出します。
そこで今回は初心者の方に向けて、
ヘッダーの解説をしていきます！
Udemyのオススメの講座
ヘッダーって何？？
ヘッダーとはwebサイトを構成しているパーツの名前です。
今見ていただいているこのサイトのヘッダーはこちらになります。
実際にヘッダーを見るとわかると思いますが、
ヘッダーってほとんどのサイトにありますよね！
ヘッダーの役割
ヘッダーの役割としては、
サイト名、ロゴ（このサイトにはまだありません・・・）、メニューなどを置くことにあります。
逆に考えると、サイト名、メニューなどはヘッダー部分に無いと分かりづらいサイトになってしまうのです。
ヘッダーの作り方
それでは、実際にコードを書いていきます。
HTMLのコードはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 |
<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のコードはこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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にしている*/ } |
ささお
