dl dt dd を使って新着一覧などを1列横並びで表示する方法

About CSS

通常テキストだけの新着一覧みたいなリストは、ul + li タグあたりで作ると思いますが、お知らせや記事名のタイトルが長くなってしまった時には、日付の下にテキストが折り返してしまってちょっと見た目が悪いです。

そこで、「ul + li」の代わりに「dl + dt + dd」タグを使って、1列の横並びリストを作ると、日付の下にテキストが折り返さないようにできます。

今回は dl + dt +dd タグを使って新着一覧などを1列横並びで表示する方法をメモします。

今回やりたいこと言いたいことはこんなこと

原理としてはこういう感じ。ul + li で自動改行されたときに日付にかかって欲しくない。

dl dt dd を使って新着一覧などを1列横並びで表示する CSS

width や margin なんかの数値は表現したい一覧に合わせて変更してください。

通常 dt が上、dd が下に配置されるところを CSS で1列にしています。

CSS の詳しい説明をすると・・・

line-height の数値を dt & dd 双方で合わせて、dd のマイナスマージンで1列になるようにします。マイナスマージンは同じ幅分落ちないとダメなので line-height に合わせます。これだけだと、dt の日付と dd のテキストが重なって1列表示になってしまいます。

dt の width と dd の padding-right で横軸が重ならないように調整。あとは縦軸の幅が狭い場合は、dd の margin-bottom と padding-bottom で調整します。

百聞は一見にしかず! 以下デモです。

dl dt dd を使って新着一覧などを1列横並びで表示したデモ

See the Pen jRGWdR by AK (@office151a) on CodePen.

こんな感じで、改行しても日付に折り返さないようになるし、シンプルな一覧なら非常に使い勝手の良い dl dt dd を使った方法です。