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