続・cssで定義リストを横並びに表示するベストな方法

前回に引き続きdl（description list:記述リスト/definition list:定義リスト）要素のレイアウト（主に横並べ）について考えてみる．floatの挙動をマスターするにはとてもいい教材だと思う．

いろいろなサイトや自分で試行錯誤した結果，横並びに表示する方法としては次のものが挙げられる．前提としてdt要素1つにdd要素1つが対応するものとする．

1. negative marginパターン
   dd要素はdt要素の高さの分だけ下にズレる点に着目し，margin-topにマイナスの値を設定して位置を上にずらす方法．
2. float-left-marginパターン
   dt要素を左にfloatさせ，dd要素をdt要素の右に回りこませるパターン．
3. float-left-rightパターン
   dt要素を左にfloatさせ，dd要素を右にfloatさせるパターン．

コードとしてはこんな感じ

#list{
 width:400px;
 font-size:0.8em;
}
#list dt,#list dd{
 padding:0;
 margin:0;
}

/*pattern 1*/
#list dt{
 width:150px;
}
#list dd{
 margin-left:150px;
 margin-top:-1em;
}

/*pattern 2*/
#list dt{
 float:left;
 clear:left;//複数行対応
 width:150px;
}
#list dd{
 margin-left:150px;//表示位置をずらす
}

/*pattern 3*/
#list dt{
 float:left;
 clear:both;
 width:150px;
}
#list dd{
 float:right;
 clear:right;
 width:250px;
}

/*clear fix*/
#list:after{
 display:block;
 clear:both;
 content:".";
 color:transparent;
 height:0;
 width:0;
}

<dl id="list">
<dt>蒼真</dt><dd>いまいち影の薄い主人公．…</dd>
<dt>アルカード</dt><dd>城主の息子…</dd>
<dt>ジョナサン</dt><dd>いつの間にか鞭しか振れなくなったかわいそうな人．</dd>
<dt>ユリウス</dt><dd>最年長のハンターであって自在な鞭裁き．…</dd>
<dt>リヒター</dt><dd>最強だけどメンタルは最弱．…</dd>
<dt>シャノア</dt><dd>背中の開いた最終兵器．…</dd>
<dt>シャーロット</dt><dd>ジョナサンの幼なじみの魔法使い．…</dd>
<dt>ヨーコ</dt><dd>現代に蘇った撲殺聖職者．…</dd>
<dt>マリア</dt><dd>潜在能力はリヒターをはるかに凌駕するが，…</dd>
<dt>シモン</dt><dd>シリーズの開祖にして伝説のハンター．…</dd>
<dt>月風魔</dt><dd>誰？</dd>
</dl> 

その上で，次のケースを考えてみる．

• dtの高さがまばらなケース
  1. margin-topの値を直接指定しているので，正しく動作しない．
  2. OK
  3. OK
• dtの高さがddの高さより大きくなるケース
  
  1. dtの高さが全て同じであればOK
  2. dtの高さが上回った処からddの配置がずれてしまう．
  3. OK
• リストの幅が可変なケース（window幅に依存するようなケース）
  
  1. OK
  2. OK（dtの幅は固定となる）
  3. dt，dd共に固定幅である必要がある．（%指定で対応可能かもしれない）

というわけでどのやり方にも一長一短があって，用途によって使い分ける必要がある．

なお，dl要素の定義ではdt要素，dd要素共に複数個の要素が連続していてもよい事になっているが，上記のやり方だと様々なパターンでレイアウトが崩れてしまうので一筋縄でいかない．dt要素とdd要素の結びつきが緩やかすぎて制御できないだ．静的なcssによるレイアウトの限界と考えられるので，悔しいけれどjavascriptで高さの調整を行うしかない．