【CSS】flexboxで定義リスト(dl、dt、dd）を横並びにする方法

　今回は、HTMLタグのdl、dt、ddタグを使って定義リストを作成していきます。定義リストタグを横並びにする際、一昔前はfloatを使用していましたが、今回はflexboxを使って横並びにする方法を解説します。
　まず定義リストタグというのは、定義する用語とその用語の説明を対にしたリストを作成するためのタグになります。
それぞれのタグの意味は以下の通りです。

dlタグ：「description list」の略で、定義リスト全体を表すタグ
dtタグ：「description term」の略で、定義する用語（名称やタイトル）を表すタグ
ddタグ：「description description」の略で、dtで定義した用語の説明を記述するタグ

HTMLで骨子を作る

index.html

 <div class="company_info">
   <dl>
     <dt>会社名</dt>
       <dd>株式会社〇〇</dd>
       <dt>所在地</dt>
       <dd>〒000-0000 東京都渋谷区</dd>
       <dt>電話番号</dt>
       <dd>03-1122-3456</dd>
       <dt>代表者</dt>
       <dd>名前 太郎</dd>
       <dt>E-Mail</dt>
       <dd>[e-mail]</dd>
       <dt>お問い合わせ受付時間</dt>
       <dd>平日：10：00～19：00（土・日・祝 定休）</dd>
   </dl>
 </div>

今回は例として新着情報の一覧をHTMLで作成しました。上記の場合、通常は下記の様に表示されます。

これに以下のCSSを追加して、dtとddを横並びにしていきましょう。

dtとddを横並びにする

　dtタグとddタグを横並びにするため、その親要素であるdlタグにdisplay: flex;を適用し、横並びを実現しています。また、複数行の表示に対応するために、flex-wrap: wrap;を指定します。

style.css

dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

dtとddの横幅を指定

　dtとddの合計の幅がdlと同じ幅になるように指定します。例えばdlの幅が100%の場合は、dt30%、dd70%の様に、dlと同じ幅に収めないとレイアウトが崩れてしまいます。これはdlでflex-wrap: wrap;を指定しているためです。

style.css

dt {
  width: 30%;
  padding-bottom: 20px;
  margin-bottom: 10px;
  background-color: #DADADA;
}

dd {
  width: 70%;
  padding-bottom: 20px;
  background-color: #F3F3F3;
  margin-bottom: 10px;
}

まとめ

・dl、dt、ddタグを使うと定義リストを作れる
・定義リストとは”用語（名称やタイトル）”と”用語の説明”が1つのセットとなったリストのこと
・flexbox（display: flex;、flex-wrap: wrap;）を使ってリストを横並びにできる