定義リストタグ<dl><dt><dd>は、普通にHTML作る上ではあまり登場せず、何に使うのかよくわからん、て感じのタグですが、表組やフォームのデザインをする上ではすごく役に立ちます。
例えばこんなのを作りたい場合。
こういったものは今までテーブルで作っていましたが、テーブルタグはソースがちょっと煩雑になり後々修正時にわかりづらいです。
定義リストタグとCSSデザインでシンプルに作ってみる方法を見つけたのでまたしても備忘録代わりに作ってみます。
まずHTMLはこんな感じです。
<dl>
<dt>サイト名</dt><dd>ONE-ZERO</dd>
<dt>管理人</dt><dd>nia</dd>
<dt>URL</dt><dd>http://www3.to/onezero<br>
非転送をご希望の場合は、http://sabbath.sunnyday.jp</dd>
<dt>バナー</dt><dd><img src="/10baner2.gif"></dd>
</dl>
これを表示させた結果はこちら。
CSSなしの初期値のままでも頭が揃っているので結構見栄えのいい感じになっています。
まずCSSで
dt {float:left;width:200px;}
を指定してやります。その結果は
このようになりました。
URLの２行目の頭が飛び出ています。（URLの高さが足りないので初期値のままの状態）
それと行間もなんとなくつまりすぎかなと思います。
dt {float: left;width: 80px;margin-bottom: 10px;line-height: 1.2em;}
dd {margin-left:100px;margin-bottom: 10px;padding-left: 100px;}
としてやります。ddの左マージンはdtの幅より20px多くなっています。
後でdtに背景色を設定したとき、20px分余白をもたせるためです。
margin-bottomとline-heightの値は、ddとdtのそれぞれに設定しないと表が崩れるので注意。
通常同じ値でいいかと思いますが、少なくとも、margin-bottomのddの値がdtより小さいと確実に崩れます。
line-heightは、URLの値が2行になっている部分に効いています。
結果はこんな感じです。
あとは細かな調整をして冒頭の表が完成です。
○完成したCSS
dt {float: left;width: 80px;margin-bottom: 10px;line-height: 1.2em;background-color: #ffff66;padding-left: 10px;}
dd {margin-left:100px;margin-bottom: 10px;padding-left: 100px;}
罫線で全て区切ってしまうような表スタイルには向かないのですが、（dtとddにheightを入れて細かくCSSを設定すればできるかも）なかなか使い道は多いかと思います。
例えばこんなメールフォームのデザインなど。
○HTMLソース
<dl>
<dt>名前</dt><dd><input name="name" value=" "> </dd>
<dt>メール</dt><dd><input name="name"> </dd>
<dt>URL</dt><dd><input name="name" value=" "> </dd>
<dt>性別</dt><dd class="radio"><input name="name" value=" " type="radio">男性 <input
name="name" value=" " type="radio">女性 </dd>
<dt>コメント</dt>
<dd><textarea name="name" value=" "></textarea> </dd>
<dd class="post"> <button name="送信" value="送信">送信</button> </dd>
</dl>
○CSS
dt {float: left;width: 80px;
margin-bottom: 10px;padding-left: 10px;padding-bottom: 2px;
border-left: 10px solid #999999;border-bottom: 1px solid #999999;}dd {padding-left: 100px;
margin-bottom: 15px;}
dd input {width: 200px;}
dd.radio input {width: 20px;}
dd textarea {width: 200px;height:30px;}
dd.post {width: 200px;text-align: right;}