定義リスト[dl]のdt/ddを横並びにする方法

こんばんちわ、やのっぱです。(´・ω・｀)

今回は定義リスト[dl]の中身(dtとdd)を横に並べる方法やってみるよ。

その前に定義リストってなん？？？美味しいの？

ッと思ってたら、どこからともなく天の声が！！←天から聞こえとるがな

「説明しよう！定義リストとは定義（dt）する用語を説明（dd）するリストである！」

つまりは用語があって、それを説明する文がセットになってるときに使うリストってことです。

もっと噛み砕くと[これ]はこういう[意味]やで～ってことです。

やのっぱ（ここdt）

毎日せこせことマークアップすることに快感を覚え、しかし打つのは面倒いので如何にして楽にマークアップするかと言うことに情熱を注ぐ汎用人型まーくあっぷえんじにゃぁ（ここdd）

こんな感じで使ったりします。

このレイアウトのままで良いのであれば問題ないのですが、しばしば横並びにしたい時があると思います。

そんなときの対処法を今回はさらっとご説明！

注意！reset.cssが掛かっている状態、clearfixの導入をした状態を想定して書き記してます。

まずは、HTML

<dl class="clearfix">
	<dt>用語1:</dt>
	<dd>説明書き説明書き説明書き説明書き</dd>
	<dt>用語2:</dt>
	<dd>説明書き説明書き説明書き説明書き</dd>
	<dt>用語3:</dt>
	<dd>説明書き説明書き説明書き説明書き</dd>
</dl>

表示はこんな感じ

用語1:

説明書き説明書き説明書き説明書き

用語2:

説明書き説明書き説明書き説明書き

用語3:

説明書き説明書き説明書き説明書き

では幾つか方法をご紹介

<style>
dl {
  width:300px;
}
dt {
  float:left;
  clear:left;
  width:60px;
}
dd {
  float:left;
  width:240px;
}
</style>

用語1:

説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き

用語2:

説明書き説明書き説明書き説明書き

用語3:

説明書き説明書き説明書き説明書き

基本、floatした要素にはwidthを与えます。
それによって、改行されたddの頭が揃います。
揃わせない場合はこちら

<style>
dl {
  width:300px;
}
dt {
  float:left;
}
dd {
}
</style>

用語1:

説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き

用語2:

説明書き説明書き説明書き説明書き

用語3:

説明書き説明書き説明書き説明書き

こちらも場面によってはつかいますね。

このdtにだけfloatをかけた状態でddの頭を揃えることもできます。

<style>
dl {
  width:300px;
}
dt {
  float:left;
}
dd {
  margin-left:80px;
}
</style>

用語1:

説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き説明書き

用語2:

説明書き説明書き説明書き説明書き

用語3:

説明書き説明書き説明書き説明書き

こんな感じでしょうか
でわ！よきコーディングライフを(・ω<)ﾉｼ