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

記述リストに使う用の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); }