スタイルシートの技
リストを作成した時にアイテム同士の間隔を変えたい
ul要素などでリストを作成した時にリストのアイテム間の間隔が狭いと感じる事があります。 あまりにぴったりしているとカッコワルイものです。アイテム間の間を広げるにはどうすれば良いのでしょうか。 「line-height」を使っても良いですが、これは一般的にはブロック要素に対して行うものなので、あまり好ましくありません。 もっと簡単な方法は無いかと。実は「margin-top」を使うだけで面倒な事を考えなくてもリストアイテム間の間隔を変えれます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title></title>
<style type="text/css">
li
{
margin-top: 0.5em;
}
</style>
</head>
<body>
<h1>有名香港アクション俳優</h1>
<ul>
<li>ジャッキー＝チェン</li>
<li>ユン＝ピョウ</li>
<li>サモハン＝キンポー</li>
</ul>
</body>
</html>
margin-top: 0.5em;
- ジャッキー＝チェン
- ユン＝ピョウ
- サモハン＝キンポー
li要素に対して、0.5emの上部マージンを与えれば結果的に間隔を空ける事ができますね。 他の場合と見比べて見ましょう！
margin-top: 0em;
- ジャッキー＝チェン
- ユン＝ピョウ
- サモハン＝キンポー
margin-top: 1em;
- ジャッキー＝チェン
- ユン＝ピョウ
- サモハン＝キンポー
これと先ほどの画像のテクニックを使えば、リストに関してはほとんど知識がついた事になります。