dl厨だったりする

定義リスト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>

で、これは素の状態だと以下のような表示になります。

info.gif

これに対して、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を使って並べる方法もあります。

info_design.gif

この他にも、場合によってはナビゲーションに使用したり、アピールポイントを説明する時に使用したりと、僕の中ではかなり使用頻度の高いタグだったりします。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/287

Comments