定義リストdlの利用率が高い。どうやってマークアップしようか悩む時は、大抵<dl>を使用するのがベストだと判断することが多いです。定義リストは<dt>で定義する用語を決め、<dd>でその用語の説明をするわけですが、例えば僕は会社概要のページなんかでも使ったりします。
<h2>会社概要</h2>
<dl id="info">
<dt>名称</dt>
<dd>株式会社Hogehoge</dd>
<dt>設立</dt>
<dd>平成16年12月17日</dd>
<dt>資本金</dt>
<dd>50,000,000円</dd>
～略～
</dl>で、これは素の状態だと以下のような表示になります。
これに対して、CSSで体裁を整えるわけです。例えば以下のようなCSSを用意します。
h2 {
font-size: 130%;
color: #666666;
background: #fff url(img/h2_bg.gif);
margin-bottom: 0.5em;
padding: 2px 0;
}
#info {
margin:10px 0 0 0;
}
#info dt {
font-size: 80%;
border-left: 8px solid #B1B3B6;
padding: 0 0 0 0.3em;
}
#info dd {
font-size: 80%;
line-height: 160%;
margin: -1.3em 0 0.8em 8em;
border-bottom: 1px dotted #666666;
}これを適用させると下記のようになります。<dd>をマージンで調整して横に並べてやると、それらしく見えるようになります。また、floatを使って並べる方法もあります。
この他にも、場合によってはナビゲーションに使用したり、アピールポイントを説明する時に使用したりと、僕の中ではかなり使用頻度の高いタグだったりします。
Comments