ヘッダーを横並びにする

01 / 04

ブロックは縦に積まれる

div や h1 や ul は、横幅いっぱいに広がる性質を持っている。だから何を置いても次の要素は下に回る。

この並び方をブロックと呼ぶよ。ヘッダーが縦に積まれていたのはこれが理由。

02 / 04

float: left; をつけると、その要素は左に寄って浮く。すると次の要素がその横に回りこむ。

横に並べたい箱すべてに float: left; をつけるのが基本の形だよ。

.logo {  float: left;}.menu li {  float: left;}

03 / 04

メニューを横に並べると、li の頭についている点が邪魔になる。

list-style: none; を ul に指定すると点が消えるよ。

.menu {  list-style: none;}

04 / 04

ヘッダーに高さと背景色を与えると、一気に「帯」らしくなる。

CSSは style.css に書く。HTMLはさわらなくていいよ。ここから書いてみよう。

.header {  height: 64px;  background-color: #f3e5d0;}