3流プログラマのメモ書き

元開発職→社内SE→派遣で営業支援の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。(jehupc.exblog.jpから移転中)

(HTML)定義リスト(dl,dt,dd)で2列横並びにする

Webがらみ

よくWebページで使われるのに、2列の表があります。

昔はこれを table タグで書いていましたが、XTHM+CSS 全盛の今日ではdl要素を使用することが主流になってきたようです。

ということで、2列の表を dl タグ(定義リスト)で作成する方法です。

幾つか方法はあるようですが、3流PGは float を使って dd 要素が dt 要素に回りこむ方法を取りました。

ほぼ、参考先のコピペですが、こんな感じです。

●HTML

 style="width:600px">




     class="left">項目


     class="right"> type="text" size="60"  >


 


     class="left">項目


     class="right"> type="text" size="60"  >


 


     class="left">項目ホゲホゲホゲホゲ


     class="right">ホゲホゲ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　


 


     class="left">項目


     class="right"> type="text" size="60"  >


 


     class="left">項目


     class="right">ホゲホゲ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　ホゲホゲ　ホゲホゲ　ホゲホゲ　ピヨピヨ　


 

●CSS

dt.left {


  clear: left;


  float: left;  /*dt,dd横並びにするため、回りこみ許可*/


  margin: 0 0 0.8em;


  width: 7.5em; /*この幅の後に次のdd要素が来る。列の位置揃えに必要。em指定でフォントサイズ変わっても大丈夫なようにする。*/


  border-left: solid 8px #CCC; /*左に罫線描画*/


  padding-left: 5px;


}


dd.right {


  margin-bottom: 0.8em; /*dtのmargin-bottomと同じ値が無難*/


  margin-left: 8em; /*dtのmargin-leftより大きい値にする。多数行になってもdtの下に回りこまないようにする。*/


}

こんな感じになります。

borderを指定することで、ホントの表のように表現することもできるようです。(IE6の場合はバグで若干ずれるので調整要)

参考：

CSSデザインカタログ | list | dt と dd を横並びにした定義リスト こちらのサイトさんのコードを拝借しました。

汎用性の高い横並びdlリストを作る [Cool Web Window]:IE6対応や罫線表示のコードも載せられています。

dlのdt dd を横並びに - CSS HappyLife