検証で出てくる中央の青いのが、現在のブラウザの横・縦幅
CSSに初めに記述する
@charset="UTF-8";
<ul>の横幅を変えて項目が全部出るか試そう
→
li{
background-color: #CCC;
width : 100px;
}
→だめでした
しかし基本的にWEBでは横並びはしない
縦にスクロールが原則で横に並べるには特別にしないとしない
方法はいくつかある
1.float（フロート）
li{
background-color: #CCC;
width : 100px;
float : left;
}
これで一応並んだ
いわば浮いた状態になる。縦に積むという原則から外れる
じゃあこれをrightにしたらどうなるか
HOME ABOUT NEWS CONTACT
が逆向きに並んでしまう。
「ルールから外れて浮かんでね」というのがfloat
●CONTACT NEWS ABOUT HOME
しかも中点が初めだけになっている。
→
これは、backgroundが・よりも前面レイヤーにきているから、塗りつぶされる。
leftのときは「背景の上に」・の情報が乗っていた。
rightのときは「背景のほうが上に」・よりも乗っている。
/*width : 100px;*/
にするとぎゅっとつまってしまいますね。
floatを使うときは横幅をしっかり指定してあげる。
さてじゃあその親の<ul>の領域はどこか？ いったんfloatは外しますよ。
ul{
background-color : #EEE;
}
li{
background-color: #CCC;
}
横幅を指定していないので<ul>は横幅いっぱいの領域を持っている。
→
これで再度floatをかけたらどうなるか？
→<ul>の領域がなくなった。
→Elementsで確認すると<ul>の高さが0になっている。
→なんで？
→「子供がいなくなったから」
親の要素は子供の要素に対応して伸びていく。
