ブログ

【CSS】dl要素(dtとdd)を横並びにする方法

定義リストタグであるdl要素のdtddを横並びにする際、ひと昔前はfloatを使ってゴチャゴチャしながら横並びにしてましたが、今回はflexを使った横並び方法のご紹介です。

このページのコンテンツ

実装方法

<dl>
	<dt>会社名</dt>
	<dd>〇〇商事株式会社</dd>
	<dt>電話番号</dt>
	<dd>011-000-0000</dd>
</dl>

上記の様なHTMLの場合は、通常は下記の様に表示されます。当然ですが、ブラウザやdlに対して何かしらのCSSの指定がある場合は除きます。

プレビューサンプル

会社名
〇〇商事株式会社
電話番号
011-000-0000

これに以下のCSSを追加します。すると、サンプルの様にdtとddが横並びになります。

dl {
	display: flex;
	flex-wrap: wrap;
}
dl dt {
	width: 40%;
}
dl dd {
	width: 60%;
}

プレビューサンプル

会社名
〇〇商事株式会社
電話番号
011-000-0000

注意点ですが、dtとddの合計の幅はdlと同じ幅に指定しないとうまく横並びになりません。例えばdlの幅が100%の場合は、dt50%・dd50%の様に、dlときっちり同じ幅に収まるようにしないと崩れます。理由はdlに指定しているflex-wrap: wrap;のせいです。

「じゃぁあ外せば?」となりますが、これを外したりflex-wrap: nowrap;を指定すると、全てが横並びになってしまうので気を付けてください。

デザイン例

<div class="company_info">
 <dl>
  <dt>会社名</dt>
  <dd>株式会社〇〇</dd>
  <dt>所在地</dt>
  <dd>〒000-0000 北海道札幌市中央区</dd>
  <dt>電話番号</dt>
  <dd>011-111-2222</dd>
  <dt>代表者</dt>
  <dd>札幌 太郎</dd>
  <dt>E-Mail</dt>
  <dd>xxx@xxxx.com</dd>
  <dt>お問い合わせ受付時間</dt>
  <dd>平日:09:00~18:00(土・日・祝 定休)</dd>
 </dl>
</div>
.company_info dl {
  display: flex;
  flex-wrap: wrap;
}
.company_info dt {
  width: 35%;
  padding: 20px;
  background-color: #DADADA;
  margin: 0 0 10px 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.company_info dd {
  width: 65%;
  padding: 20px;
  background-color: #F3F3F3;
  margin: 0 0 10px 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

プレビューサンプル

会社名
株式会社〇〇
所在地
〒000-0000 北海道札幌市中央区
電話番号
011-111-2222
代表者
札幌 太郎
E-Mail
xxx@xxxx.com
お問い合わせ受付時間
平日:09:00~18:00(土・日・祝 定休)
最近の記事 おすすめ記事
PAGE TOP