カテゴリー: コーディング

dl要素は説明リストとして、dt要素（定義語）とdd要素を（説明文）を組み合わせて用いますが、デフォルトのスタイルだと少し物足りない感じがします。

▼ デフォルトのスタイル

ペン

鉛筆。多くはシャープ ペンシルを指す。

パイナップル

パイナップル科の多年生植物。

りんご

バラ科リンゴ属の落葉高木樹。

そこで、説明リストとして見やすくする為に以下のスタイルをよく使います。

#main dl dt {
  position: absolute;
}

#main dl dd {
  padding-left: 2em;
}

#main dl dd:before {
  content: "… ";
}

まずdt要素をposition:absolute;で浮かせて、dd要素が重なってくるのでpadding-leftで左に余白を作ります。最後に「…」をdd要素の先頭に追加しました。

これでデフォルトよりは説明リストっぽくなったかと思います。