2012年2月23日木曜日

続・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で高さの調整を行うしかない.

0 件のコメント:

コメントを投稿