人気ブログランキング | 話題のタグを見る
(HTML)定義リスト(dl,dt,dd)で2列横並びにする
よくWebページで使われるのに、2列の表があります。

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


ということで、2列の表を dl タグ(定義リスト)で作成する方法です。
幾つか方法はあるようですが、3流PGは float を使って dd 要素が dt 要素に回りこむ方法を取りました。

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

●HTML
<div style="width:600px">
<dl>
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目ホゲホゲホゲホゲ</dt>
<dd class="right">ホゲホゲ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ </dd>
 
<dt class="left">項目</dt>
<dd class="right"><input type="text" size="60" ></dd>
 
<dt class="left">項目</dt>
<dd class="right">ホゲホゲ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ ホゲホゲ ホゲホゲ ホゲホゲ ピヨピヨ </dd>
 
</dl>
</div>


●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の下に回りこまないようにする。*/
}


こんな感じになります。
(HTML)定義リスト(dl,dt,dd)で2列横並びにする_e0091163_043397.jpg



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


参考:
CSSデザインカタログ | list | dt と dd を横並びにした定義リスト こちらのサイトさんのコードを拝借しました。
汎用性の高い横並びdlリストを作る [Cool Web Window]:IE6対応や罫線表示のコードも載せられています。
dlのdt dd を横並びに - CSS HappyLife
by Jehoshaphat | 2012-06-26 00:44 | Webがらみ


<< (HTML)ul(リスト)を使... (Apache)特定ファイルに... >>