webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

ul について考える。

実験の条件

  • リセットをかけた状態で、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>