実験の条件
- リセットをかけた状態で、liが5つあるulの要素検証をしてみる。
- bodyや#containerとの関係もみたいので、bodyに色を付けてみた。
- #containerにはwidth: 500px;を設定した。
確認したかったことのまとめ
- bodyで指定したフォントサイズになっている。
- line-heightは1.0だから、li の高さは30px になっている。line-heightを1.2にすれば、li の高さは36px になっている。
- アセンダは思いのほか広い印象だ。ディセンダの幅も確認できた。
- liの幅は、ulと同じで,親要素の#container の幅 500pxになる。
- liにボーダーをつけるとその分だけul (もちろんli も)のサイズが大きくなる。
- ボーダーは重複している部分も相殺されない。
- li にバックグランドをつけると、文字以外の部分にも背景がつく。
インライン要素<a>をつけてみる
- アンダーラインを含めてli と同じ大きさになっている。アンダーラインは内側にできている。どうも、ディセンダの部分がアンダーラインになっているみたいだ。
- li aにバックグランドをつけると、文字の部分しか背景がつかない。だから、display:block;するんですね、ということ。
- display: block;すれば li とli a の幅は同じになる。
- a は ブロック要素 li のなか(文字)にしか作用しない。
- li に幅高さを指定しておけば(ここが大切!)li a でボーダーを付けても全体の大きさが変わらない。CSSスプライトの時はここがポイントになる。
- li a にフロートをかけると、おかしなことになる。display: block; の魔法が解けて本来の姿に戻るみたいだ。liを横一列にするときは、ul に overflow: hidden; 、li に float: left; をかける。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ulについて</title>
<style>
html, body, ul, li{
margin: 0;
padding: 0;
line-height: 1.0;
}
ul, li{
list-style-type: none;
}
body{
font-size: 30px;
background: #FFFFEE;
padding: 10px 0 10px 0;
}
#container{
background: #FFFFFF;
width: 500px;
margin: 0 auto;
}
</style>
</head><body>
<div id="container">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul>
</div>
</body>
</html>