CSSでdlのdtとddを横並びにする方法（複数dt/複数dd対応）
公開：2020-05-05
更新：
CSSで、HTMLのdlタグのdt（項目）とdd（説明）を横並びにする方法です。
dd部分が長くて複数行になっても高さが自動調節されます。すでにあるHTMLは変更なく可能です。複数dtや複数ddにも対応した方法も書いています。
様々なウィンドウ幅や画面幅に対応するレスポンシブデザインで、デモで実際に検証できます。
ページ内目次
実際の様子（デモ）
実際に、PCでウィンドウ幅を変えたり、スマートフォンなどで縦横を変えてみてください。
- 2020-03-13
- 記事「canvasでFabric.jsを使用して図形変更やユーザ操作を便利にする」を更新しました。
- 2020-04-04
- 記事「生年から年齢や入学卒業年や長寿祝いを計算する」をアップしました。
- 2020-05-04
- 記事「簡単！HTMLの共通部分を別ファイルにして多数ページで共通化」をアップしました。
コードとCSS解説
HTMLのdlの基本的書き方と、dtとddを横並びにするCSSです。HTMLは、すでにあればそのままで変更の必要はありません。
<dl> <dt>項目</dt> <dd>説明説明説明説明説明</dd> <dt>項目</dt> <dd>説明説明説明説明説明</dd> </dl>
dl dt { float: left; }
dl dd { margin-left: 120px; }
- 1
- 横並びにします。
- 2
- 項目の幅です。最大文字数に応じて変えてください。
複数ddや複数dtに対応した方法
複数ddの場合
話の便宜上、dtではなく先ずはdtの話です。こちらのデモをお試しください。
- 項目
- 説明1：一つの定義語（dt）に対し、複数の定義説明（dd）を当てることが認められています。
- 説明2：この例では1つの項目に対して、説明1と2が割り当てられています。
<dl> <dt>項目</dt> <dd>説明1：一つの定義語（dt）に対し、複数の定義説明（dd）を当てることが認められています。</dd> <dd>説明2：この例では1つの項目に対して、説明1と2が割り当てられています。</dd> </dl>
こちらのCSSは上記そのままです。
複数dtの場合
次にこちらのデモをお試しください。
- 項目1
- 項目2
- 項目3
- 複数の定義語（dt）に対する一つの定義説明（dd）が認められています。この例では項目1～3に対して、この1つの説明が割り当てられています。
<dl> <dt>項目1</dt> <dt>項目2</dt> <dt>項目3</dt> <dd>複数の定義語（dt）に対する一つの定義説明（dd）が認められています。この例では項目1～3に対して、この1つの説明が割り当てられています。</dd> </dl>
複数のdtは下記の通り clear が必要でした。
dl dt {
float: left;
clear: left;
}
dl dd {
margin-left: 120px;
}
dl dd::after {
content: "";
display: block;
clear: left;
}
- 3,10～14
- 複数dtに必用です。
まとめ
このように、dlは仕様上、下記が認められています。
- 複数のdtに対し、一つのdd
- 一つのdtに対し、複数のdd
- 複数のdtに対し、複数のdd
以上、dlタグのdtとddを横並びにする方法でした。