Web Frontier

dl要素はリスト用のHTMLタグです。 ここで、dl要素にはcompactという属性が存在します。

<dl compact>
   <dt>名前</dt>
      <dd>高橋 克典</dd>
   <dt>出身</dt>
      <dd>神奈川県</dd>
   <dt>主演</dt>
      <dd>特命係長「只野 仁」</dd>
</dl>

これを使うと、対になったdt/dd要素は一行で表示してくれる便利なものです。 しかし、HTML4.01 Strict, XHTML1.0 Strict, XHTML1.1ではcompactは定義されていません。 そこで、以下のようにします。。

dt
{
   float: left;
   clear: left;
   width: 200px;
}

このように記述すると、スタイルシートで実現可能ですが、 dt要素の後にdd要素が2つ以上続くと、compact属性のような効果は得られません。 この辺については、回避策を知っている方は情報お待ちしています。

また、dt要素とdd要素に文章がくるならばこれで良いですが、dt要素には文章、dd要素には画像などにする場合、 高さのズレが発生してしまいます。これを防ぐためにはdt要素とdd要素に"height"属性を記載して、高さを揃えるといいでしょう。 画像の中央合わせには、"vertical-align"属性が有効かと思います。