HTML・CSS] 説明リストdlのdtとddを横並びに表示する方法（コピペで使えるコード付き）

HTMLの説明リスト（<dl>、<dt>、<dd>）は通常縦に並びます。
しかし、住所や営業時間などの情報を横並びで整理したい場合も多くあります。
この記事では、flexbox と grid を使って説明リストを横並びにする方法を、そのままコピペで使えるコード付きでご紹介します。

1. flexbox を使用する方法

基本

See the Pen
dlのdtとddを横並びに表示（flexbox 基本） by mkl may (@mkl-may)
on CodePen.

divでグループ化

dt と dd を <div> でグループ化すると、横並びだけでなく、装飾やスタイルの調整もしやすくなります。

See the Pen
dlのdtとddを横並びに表示（flexbox ：divでグループ化） by mkl may (@mkl-may)
on CodePen.

2. grid を使用する方法

See the Pen
dlのdtとddを横並びに表示（grid） by mkl may (@mkl-may)
on CodePen.

まとめ

説明リストの横並びには、flexbox と grid がモダンで推奨される方法です。
・flexbox は小規模・1行単位の横並びに便利です。
・grid は複雑なレイアウトや複数列の管理に向いています。
状況に応じて、使いやすい方法を選びましょう。