dlタグを使った記述リスト【HTML＆CSS】

HTML
css, dd, dl, dt, 記述リスト

HTML

記述リストに使う用のdlタグの使用サンプル。

更新情報やお知らせ一覧に使われていたりする。

箇条書きにちょっとした説明をつけたい場合に使うといいのかも。

実際の見え方

sample01: sample01; sample01; sample01

sample02: sample02; sample02; sample02

sample03: sample03; sample03; sample03; sample03

せっかく色付けしてみたので、HTMLとCSSのコードを載せておきます。

HTMLコード

        <dl>
            <dt class="sample-01">sample01</dt>
            <dd>sample01</dd>
            <dd>sample01</dd><dd>sample01</dd>
            </dl>
        <dl>
            <dt class="sample-02">sample02</dt>
            <dd>sample02</dd>
            <dd>sample02</dd>
            <dd>sample02</dd>
        </dl>
        <dl>
            <dt class="sample-03">sample03</dt>
            <dd>sample03</dd>
            <dd>sample03</dd>
            <dd>sample03</dd>
            <dd>sample03</dd>
        </dl>

CSSコード

dl　{ width:100%; algin:5px 0 10px; }

dl dt{ padding: 0.5em; display: inline-block; line-height: 1.5; vertical-align: middle; border-radius: 25px 0px 0px 25px; font-size: 1.5rem; margin-top: 10px; margin-bottom: 5px; width: 100%; border-left: none;  }

dl dt:before { content: '●'; color: white; margin-right: 8px; }

/*色分けここから*/

/*sample-01*/
dl dt.sample-01{ background: linear-gradient(to right, lightgoldenrodyellow,85%, transparent); }

/*sample-02*/
dl dt.sample-02{ background: linear-gradient(to right, blanchedalmond,85%, transparent); }

/*sample-03*/
dl dt.sample-03{ background: linear-gradient(to right, lightcoral,85%, transparent); }