用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。
dtとddの間で改行しない
float:leftを使う方法
<dt>はブロックレベル要素ですから、原則として横並びにはできません。そこで、float:leftを使って<dd>と横並びできるように調整します。
<dd>のmargin-leftは<dt>と同じ始点です。下記のHTMLであればLからの距離ではありません。この仕様のおかげで、<dd>の始点を統一できるわけです。marginを小さくすると<dt><dd>が繋がることはありますが、重なることはありません。
- HTML
- マークアップ言語です
- CSS
- 装飾するための仕様です
style属性で記述
<dl> <dt style="float: left;">HTML</dt> <dd style="margin-left:60px;">マークアップ言語です</dd> <dt style="float: left;">CSS</dt> <dd style="margin-left:60px;">装飾するための仕様です</dd> </dl>
スタイルシートで記述
<dl class="dl-this-style"> <dt>HTML</dt> <dd>マークアップ言語です</dd> <dt>CSS</dt> <dd>装飾するための仕様です</dd> </dl>
.dl-this-style dt{ float: left; } .dl-this-style dd{ margin-left:60px; }
floatとclearについて
float:leftによって続く要素は右に回り込むこととなります。これを解除するものがclearです。ですから、<dt>にclear:leftを入れる必要があるかのように見えます。しかし、float:leftの本来の意味は左寄せにすることです。ですからclear:leftを含んでいることになります。float指定をするならclearをわざわざ書く必要はないということです。float指定をせず、通常の要素として配置したい(続く要素について右に回り込ませる必要がない)ときであれば、clearを指定します。
dt,dd要素の概要

dl dt dd 説明リスト コピペで使えるHTML+CSS
特定の語句に対応する説明文などを表記するdl、dd、dt要素について解説。
CSSプロパティ

float ボックスの回り込み コピペで使えるHTML+CSS
画像img要素やボックスの回り込みについて指定するfloatプロパティのleft、rightなどについて実例をあげながら解説します。
説明リストのデザイン
- HTML
- マークアップ言語です。ホームページの作成において利用されます。
- CSS
- 装飾するための仕様です。
style属性で記述
<dl> <dt style="display: inline-block; background-color: #45a7e0; padding: 1px 5px; border: 1px solid #444444;">HTML</dt> <dd style="padding-left: 30px; margin-left: 30px; margin-top: -17px; border: 2px solid #444444; width: 50%;">マークアップ言語です。ホームページの作成において利用されます。</dd> <dt style="display: inline-block; background-color: #45a7e0; padding: 1px 5px; border: 1px solid #444444; margin-top: 5px;">CSS</dt> <dd style="padding-left: 30px; margin-left: 30px; margin-top: -17px; border: 2px solid #444444; width: 50%;">装飾するための仕様です。</dd> </dl>
スタイルシートで記述
<dl class="dl-design-style"> <dt>HTML</dt> <dd>マークアップ言語です。ホームページの作成において利用されます。</dd> <dt style="margin-top: 5px;">CSS</dt> <dd>装飾するための仕様です。</dd> </dl>
.dl-this-style dt{ display: inline-block; /* inline-blockによって幅を可変にします*/ background-color: #45a7e0; padding: 1px 5px; border: 1px solid #444444; } .dl-this-style dd{ padding-left: 30px; margin-left: 30px; margin-top: -17px; border: 2px solid #444444; width: 50%; }